首先介绍一下tap事件：tap事件的含义：在移动端，点击事件会有300ms的延迟，因为浏览器通过判断来判断是否缩放网页是否会在300ms内继续点击。（即双击放大网页效果有300ms的时间判断，300ms过后会触发click事件）tap事件的实现：使用默认支持的touch事件浏览器去模拟，根据touchstart、touchmove、touchend这三个事件模拟点击事件，达到封装点击事件的效果。下面的代码是我制作的一个简单的包装器。//定义tap函数，传入要绑定的元素，一个回调函数functiontap(el,callBack){varstartTime=0;var最大时间=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){//如果超过最大时间，tapconsole不会被触发log('timedout');return;}//如果移动距离过大，则不是tap事件，为了在电脑上看效果，设置为这里1000，因为移动幅度在电脑端不好控制，如果是在移动端，设置成30就差不多了。if(Math.abs(endX-startX)>1000||Math.abs(endY-startY)>1000){返回;}callBack(e);})}tap(document.documentElement,function(e){console.log(e);});整理一下：点击事件的顺序是touchstart->touchmove->touchend->executecallbackintouchendoverlay消失，露出底部页面。当底部页面的某个元素绑定了点击事件，当点击遮罩时，恰好点击了该元素的位置，发现触发了该元素的点击事件。PC端点击的触发顺序是mousedown->mousemove->mouseup->click，移动端的触发顺序是t??ouchstart->touchmove->touchend->click。因为在touchend的时候我们的mask已经消失了，相当于点击了底部页面的元素。所以底部元素会触发点击事件。tap点穿透的解决方法：统一使用tap事件或者click事件。延迟遮罩层消失，使其超过300ms，用透明遮罩挡住（不推荐，太笨，又麻烦）使用fastclick库
