fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html，fastclick可以解决在手机上点击事件的300ms延迟；另外我们也知道zepto的touch模块，帮助我们实现了很多手机上的事件，比如tap等，tap事件也是为了解决在click的延迟问题。那么他们有什么区别呢？

先看zepto的touch模块实现：

$(document)
    .on('touchstart ...',function(e){
             ...
             ...
             now = Date.now()
             delta = now - (touch.last || now)
             if (delta > 0 && delta <= 250) touch.isDoubleTap = true
             touch.last = now
    })
    .on('touchmove ...', function(e){
    })
    .on('touchend ...', function(e){
           ...
           if (deltaX < 30 && deltaY < 30) {
                  var event = $.Event('tap')

                  touch.el.trigger(event)
           }
    })

touch模块绑定事件touchstart,touchmove和touchend到document上，然后通过计算touch事件触发的时间差，位置差来实现了自定义的tap,swipe等。

那么tap事件为什么会“穿透”呢？

比如下面的代码：

<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="/resources/js/zepto.js"></script>
        <script type="text/javascript" src="/resources/js/zepto-touch.js"></script>
        <title></title>
    </head>
    <body>
        <style>
            .q{width: 200px;height: 200px;background-color: red;position: absolute;top:0;;left: 0}
            .b{width: 300px;height: 300px;background-color: green;position: absolute;top:0;;left: 0}
        </style>

        <div class="b"></div>
        <div class="q"></div>
        <script>
            $('.q').on('tap',function(e){
                $(this).hide();
            });
            $('.b').on('click',function(e){
                alert("bb");
            });
        </script>
    </body>
</html>

在手机上，点击了q以后，就会弹出bb的弹框，为什么呢？

因为tap事件是通过document绑定了touchstart和touchend事件实现，$('.q')上，当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面，

现在touchend冒泡到了document上，并且$('.b')在页面的最前面，然后就触发了click事件。

返回栏目页：http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索事件
， 延迟
， zepto
， touch
， Now
， fastclick
， zepto与jquery的区别
， zepto轮播
fastclick插件
zepto click tap、zepto fastclick、zepto fastclick用法、fastclick tap、fastclick tap 事件，以便于您获取更多的相关知识。