一、事件触发顺序
PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown->mouseup ->click 三步。
手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart->touchmove->touchend。
手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。也就是说在移动端的click事件可以拆解为：touchstart->touchmove->touchend -> click。
浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。
上面说到原生事件中并没有 tap 事件，可以参考经典的 zepto.js 对 singleTap 事件的处理。见源码 136-143 行
可以看出，singleTap 事件的触发时机 —— 在 touchend 事件响应 250ms 无操作后，触发singleTap。
二、点击穿透场景及原因
有了以上的基础，我们就可以理解为什么会出现点击穿透现象了。我们经常会看到“弹窗/浮层”这种东西，我做个了个demo。
demo
整个容器里有一个底层元素的div，和一个弹出层div，为了让弹出层有模态框的效果，我又加了一个遮罩层。
<div class="container">
<div id="underLayer">底层元素</div>
<div id="popupLayer">
<div class="layer-title">弹出层</div>
<div class="layer-action">
<button class="btn" id="closePopup">关闭</button>
</div>
</div>
</div>
<div id="bgMask"></div>
然后为底层元素绑定 click 事件，而弹出层的关闭按钮绑定 tap 事件。
$('#closePopup').on('tap',function(e){
$('#popupLayer').hide();
$('#bgMask').hide();
});
$('#underLayer').on('click',function(){
alert('underLayer clicked');
});
点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了，则继续触发click，由于这时弹出层已经消失，所以当前click事件的target就在底层元素上，于是就alert内容。整个事件触发过程为 touchend -> tap -> click。
而由于click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层同样位置的DOM元素触发了click事件（如果是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。
因此，点击穿透的现象就容易理解了，在这 300ms 以内，因为上层元素隐藏或消失了，由于 click 事件的滞后性，同样位置的 DOM 元素触发了 click 事件（如果是 input 则触发了 focus 事件）。在代码中，给我们的感觉就是 target 发生了飘移。
三、解决
1. 触摸结束时touchend 事件触发时，preventDefault()。看上去好像没有什么问题，但是，很遗憾的是不是所有的浏览器都支持。
2. 禁止页面缩放通过设置meta标签，可以禁止页面缩放，部分浏览器不再需要等待 300ms，导致点击穿透。点击事件仍然会触发，但相对较快，所以 click 事件从某种意义上来说可以取代点击事件， 而代价是牺牲少数用户（click 事件触发仍然较慢）的体验。
<meta name="viewport" content="width=device-width, user-scalable=no">
IE 10可以用 CSS 取消点击穿透的延迟：
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
IE 11+ 可以用touch-action: manipulation;属性来阻止元素的双击缩放。
3. CSS3 的方法虽然主要讲的是事件，但是有必要介绍一个 CSS3 的属性 —— pointer-events。
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;
pointer-events 属性有很多值，有用的主要是 auto 和 none，其他属性为 SVG 服务。
查看浏览器支持情况可见移动端开发还是可以用的。
| 属性 | 含义 |
|---|---|
| auto | 默认值，鼠标或触屏事件不会穿透当前层 |
| none | 元素不再是target，监听的元素变成了下层的元素（如果子元素设置成 auto，点击子元素会继续监听事件） |
4. 延长消失事件可以利用jquery的fadeout，设置事件大于300ms。
本文参考自：https://segmentfault.com/a/1190000003848737
http://liudong.me/web/touch-defect.html
原作地址：https://www.cnblogs.com/shytong/p/5463673.html
网友评论