移动开发之fastclick 点击穿透

穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟(300ms)或者事件冒泡导致

现象：在A页面中有个 btn1<或a标签>，在B页面中有个 btn2，btn1和btn1都在屏幕同一个位置，两个按钮都有绑有自己的点击事件。btn1的click事件触发后跳转到B页面。当btn1被点击后跳到B页面，btn2按钮的click事件也被触发了

一般的解决方案如下：

a. 使用fastclick，这个可以非常完美的解决点穿问题。

b. 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。

但是页面的a标签还是存在点击穿透，导致页面跳转， fastclick无效果

 

在网上搜索和实践后总结如下方案

1.通过touchstart，touchmove，touchend，来模拟一个click（tap）事件，这样除了防止穿透外，事件响应速度也会提高。

移动端的click都是touch之后，才会模拟触发,触发的顺序是:

touchstart —> touchmove —> touchend —> mousedown —> mousemove —> mouseenter —> click

 

2.移动端存在300ms延时，那么在B页面中先放一个遮罩层<div id="dcMask"> </div>，遮住页面全部内容，然后等B页面加载完  ，将遮罩层隐藏

<div id="dcMask"> </div>

$(function(){
　　setTimeout(function(){
　　　　$('#dcMask').hide();
　　},300);
});

3.使用css的 pointer-events:none

　　先使用 pointer-events 禁掉元素的点击事件，页面加载完300ms后恢复事件，设置 pointer-events:auto

a[href]{
　　pointer-events:none;
}

$(function(){
　　setTimeout(function(){
　　　　$('a[href]').css('pointer-events','auto');
　　},300);
});