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 :
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é)
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 :
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!