Analyse des événements Tap et des principes de pointage Tap

Le contenu de cet article concerne l'analyse de l'incident Tap et le principe du pointage Tap. Il a une bonne valeur de référence et j'espère qu'il pourra aider des amis dans le besoin.

Introduisez d'abord l'événement tap :

1. La signification de l'événement tap : Côté mobile, l'événement click sera retardé de 300 ms car le navigateur détermine si le le clic continuera dans 300 ms, pour déterminer s'il faut zoomer sur la page Web. (C'est-à-dire qu'il y a un temps de 300 ms pour juger de l'effet d'un double-clic pour agrandir une page Web. Après 300 ms, l'événement de clic sera déclenché)

2. Mise en œuvre de l'événement Tap : Utiliser l'événement tactile pris en charge par le navigateur par défaut Pour simuler, les événements de frappe sont simulés en fonction des trois événements touchstart, touchmove et touchend pour obtenir l'effet d'encapsulation des événements de frappe. Le code ci-dessous est une simple encapsulation que j'ai réalisée.

//定义tap函数，传入需要绑定的元素，和一个回调函数
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //开始触摸的事件  
        startX = e.touches[0].clientX; //手指在浏览器横坐标
        startY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在浏览器横坐标
        endY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap
               console.log('超时了');
            return ; 
        }
        //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});

Pour faire le tri : l'ordre des événements tap est touchstart -> touchmove -> touchend -> le point de frappe est clair Principe :

Il est courant de voir ce scénario d'application. Cliquez sur le calque de masque, et le calque de masque disparaît, révélant la page du bas. Lorsqu'un élément de la page du bas est lié à un événement de clic et que vous cliquez sur le masque exactement à la position de l'élément, vous constaterez que l'événement de clic de l'élément est déclenché.
La séquence de déclenchement du côté PC est mousedown -> mousemove -> mouseup -> ; touchend -> le clic est exécuté dans cet ordre. Parce que notre masque a disparu lorsque vous touchez, cela équivaut à cliquer sur l'élément en bas de la page. Ainsi, l'élément inférieur déclenchera l'événement click.
La solution pour la pénétration du tap :

Utilisez l'événement Tap ou l'événement Click de manière uniforme.
Retarder la disparition de la couche du masque à plus de 300ms
Prendre un masque transparent pour la bloquer (déconseillé, trop bête, quand même gênant)
Utilisez la bibliothèque fastclick
Recommandations associées :

Nouveaux attributs HTML5 : cinq attributs globaux Introduction aux attributs

implémentation native sur toile de la signature mobile de page Web frontale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!