移动开发之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);
});

 

posted @ 2015-09-15 19:56  *骑着蜗牛游世界*  阅读(2372)  评论(0编辑  收藏  举报