這篇文章跟大家介紹的文章內容是關於對Tap事件和Tap點透原理的分析,有很好的參考價值,希望可以幫助到有需要的朋友。
首先介紹tap事件:
tap事件的意義:在行動端,click事件會有300ms延遲,因為瀏覽器透過判斷300ms內是否會繼續點擊,來判斷是否縮放網頁。 (即雙擊放大網頁的效果有一個300ms的時間來判斷,300ms過去了,才會觸發click事件)
tap事件的實現:使用瀏覽器預設支援的touch事件來模擬,根據touchstart、touchmove、touchend這三個事件進行模擬tap事件,達到封裝tap事件的效果。下面的程式碼是我做的一個簡易的封裝。
//定义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); });
梳理一下:tap事件的順序就是touchstart -> touchmove -> touchend -> 在touchend中執行回呼
tap點透的原理:
常見到有這種應用場景,點擊遮罩層,遮罩層消失,露出底部的頁面。當底部的頁面中某個元素綁定了click事件,並且點擊遮罩的時候正好點的是該元素的位置,會發現該元素的click事件被觸發了。
click在PC端觸發順序是mousedown -> mousemove -> mouseup -> click這個順序來執行的,在行動端觸發順序是touchstart -> touchmove - > touchend -> click這個順序執行。因為在touchend的時候我們的遮罩已經消失了,所以相當於點擊到了底部頁面中的元素。所以底部元素會觸發click事件。
tap點透的解:
#統一使用tap事件,或是click事件。
延遲遮罩層消失的時間,使其超過300ms
拿個透明遮罩擋住(不推薦,太笨了,還麻煩)
使用fastclick庫
#相關推薦:
canvas原生實作前端網頁行動裝置簽章#以上是對Tap事件和Tap點透原理的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!