解决关于移动端zepto的tap点透bug（英文ghost click）

最新推荐文章于 2021-07-11 16:33:55 发布

coreyhsu2020

最新推荐文章于 2021-07-11 16:33:55 发布

阅读量5.4k

点赞数 1

分类专栏：网页技术文章标签： zepto tap

网页技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

工作中遇到了这样的一个点透的问题，具体描述在下文中有提到，这里转载一篇博文，觉得是个不错的解决方案

来自：悠悠工厂——web前端

在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，下面是一个例子：
先看看zepto RC1版本的tap模拟事件的实现方法：

;(function($){
  var touch = {}, touchTimeout
 
  function parentIfText(node){
    return 'tagName' in node ? node : node.parentNode
  }
 
  function swipeDirection(x1, x2, y1, y2){
    var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)
    return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
  }
 
  var longTapDelay = 750, longTapTimeout
 
  function longTap(){
    longTapTimeout = null
    if (touch.last) {
      touch.el.trigger('longTap')
      touch = {}
    }
  }
 
  function cancelLongTap(){
    if (longTapTimeout) clearTimeout(longTapTimeout)
    longTapTimeout = null
  }
 
  $(document).ready(function(){
    var now, delta
 
    $(document.body).bind('touchstart', function(e){
      now = Date.now()
      delta = now - (touch.last || now)
      touch.el = $(parentIfText(e.touches[0].target))
      touchTimeout && clearTimeout(touchTimeout)
      touch.x1 = e.touches[0].pageX
      touch.y1 = e.touches[0].pageY
      if (delta > 0 && delta <= 250) touch.isDoubleTap = true
      touch.last = now
      longTapTimeout = setTimeout(longTap, longTapDelay)
    }).bind('touchmove', function(e){
      cancelLongTap()
      touch.x2 = e.touches[0].pageX
      touch.y2 = e.touches[0].pageY
    }).bind('touchend', function(e){
       cancelLongTap()
 
      // double tap (tapped twice within 250ms)
      if (touch.isDoubleTap) {
        touch.el.trigger('doubleTap')
        touch = {}
 
      // swipe
      } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
                 (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) {
        touch.el.trigger('swipe') &&
          touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
        touch = {}
 
      // normal tap
      } else if ('last' in touch) {
        touch.el.trigger('tap')
 
        touchTimeout = setTimeout(function(){
          touchTimeout = null
          touch.el.trigger('singleTap')
          touch = {}
        }, 250)
      }
    }).bind('touchcancel', function(){
      if (touchTimeout) clearTimeout(touchTimeout)
      if (longTapTimeout) clearTimeout(longTapTimeout)
      longTapTimeout = touchTimeout = null
      touch = {}
    })
  })
 
  ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){
    $.fn[m] = function(callback){ return this.bind(m, callback) }
  })
})(Zepto)

注意上述代码的31行，zepto的实现过过程是通过兼听绑定在body上的touch事件来完成这些事件的模拟的，也就是说，模拟所用的touch事件在body上才会被捕获。

考虑下面这个页面的代码：

<!doctype html>
<head>
    <meta charset="utf-8"/>
    <title>zepto tap 点透测试</title>
    <script src="http://zeptojs.com/zepto.js"></script>
    <style type="text/css">
        #divTapAbove,#divClickUnder{position: absolute;top: 0;left: 0;}
        #divTapAbove{width: 200px;height: 75px;background: red}
        #divClickUnder{width: 300px;height: 50px;background: blue}
        #output{position: absolute;top: 100px;left:0;border: 1px solid #000;width:200px;min-height:100px;}
    </style>
</head>
<body>
    <div id="divClickUnder"></div>
    <div id="divTapAbove"></div>
    <div id="output"></div>
    <script>
        $(function(){
            var $output = $('#output')
            ,$divTapAbove = $('#divTapAbove')
            $('#divClickUnder').on('click',function(){
                $output.html($output.html() + 'click<br/>')
            })
            $divTapAbove.on('tap',function(){
                $divTapAbove.hide() // 注意，该div被tap触发后会隐藏自己
                $output.html($output.html() + 'tap<br/>')
            })
        })
    </script>
</body>

在桌面的chorme浏览器上，并且打卡开发人员工具提供的“Emulate touch events”对touch事件进行模拟，点击两个div的公共区域，只会触发divTapAbove的tap事件，如下图所示：

点击之后的结果是：

可以看到，是没有问题的，虽然上面的“divTapAbove”tap后隐藏了自己，不过下面的“divClickUnder”没有被触发click事件。

情况换到ios上的safari就不一样了，点击前如图：

点击后的情况如下：

可以发现，在ios的safari上，tap隐藏了上面的“divTapAbove”后，同时也触发了下面的“divClickUnder”的click事件，即俗称的“点透了”。
原因是因为：
1.根据上面贴的zepto代码的31行，tap事件实际上是在冒泡到body上时才触发
2.ios safari上有click事件的延迟触发
具体分析，body是包含“divClickUnder”的（即在DOM树上，body是divClickUnder前辈）在它冒泡到body之前，用户手的接触屏幕和离开屏幕是会先触发click事件的，（根据click事件的规则，只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件）由于click延迟，此时上面的“divTapAbove”已经隐藏，满足下面的“divClickUnder”的click事件的触发条件，于是click事件就被触发了，即“点透”了。

解决方案一：
github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

 
        $( 
        function 
        (){ 
       
        new 
        FastClick(document.body); 
       
        })

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击
进一步，对于zepto，如果你打算继续使用它，那么它的tap相关事件已经没有用了，我们可以自己build一个无“touch”模块的zepto，以便减小zepto文件的大小和提高运行效率。zepto的github页面有定制化模块的方法，见https://github.com/madrobby/zepto的building部分。
经过亲测，这样不会发生“点透”现象

解决方案二：
根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要
1.一个优先于下面的“divClickUnder”捕获的事件
2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。
如，将tap事件改为touchend（虽然意思肯定不完全一样，而且不够优雅），这样就直接在“divTapAbove”被捕获，而不是在body上才被捕获了，满足了1；再在内部使用preventDefault()解决了2，代码如下：

 
        $divTapAbove.on( 
        'touchend' 
        , 
        function 
        (e){  
        // 改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发 
       
        $divTapAbove.hide() 
       
        $output.html($output.html() +  
        'tap<br/>' 
        ) 
       
        e.preventDefault();  
        // 阻止“默认行为” 
       
        })

可以通过截图看到，这个问题已经解决了。

至此，我们的结论是，在使用zepto框架的tap相关方法时，一定要注意，如果绑定tap方法的dom元素在tap方法触发后会隐藏、css3 transfer移走、requestAnimationFrame移走等，而“隐藏、移走”后，它底下同一位置正好有一个dom元素绑定了click的事件、或者有浏览器认为可以被点击有交互反应的dom元素（举例：如input type=text被点击有交互反应是获得焦点并弹起虚拟键盘），则会出现“点透”现象。在这种情况下，我们应当采用上述两种方法来避免“点透”。

其他解决方案：

Ghost clicks in mobile browsers (成哥给的解决方案)
http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/

coreyhsu2020

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决关于移动端zepto的tap点透bug（英文ghost click）

工作中遇到了这样的一个点透的问题，具体描述在下文中有提到，这里转载一篇博文，觉得是个不错的解决方案来自：悠悠工厂——web前端在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，下面是一个例子：先看看zepto RC1版本的tap模拟事件的实现方法：;(function($){ var touch = {}, t
复制链接

扫一扫

专栏目录