這篇文章跟大家介紹的文章內容是關於對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中文網其他相關文章！
