首页 > 代码库 > fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

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

2024-07-05 16:14:52   223人阅读

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

先看zepto的touch模块实现：

 1 $(document)
 2     .on(‘touchstart ...‘,function(e){
 3              ...
 4              ...
 5              now = Date.now()
 6              delta = now - (touch.last || now)
 7              if (delta > 0 && delta <= 250) touch.isDoubleTap = true
 8              touch.last = now
 9     })
10     .on(‘touchmove ...‘, function(e){
11     })
12     .on(‘touchend ...‘, function(e){
13            ...
14            if (deltaX < 30 && deltaY < 30) {
15                   var event = $.Event(‘tap‘)
16                 
17                   touch.el.trigger(event)
18            }
19     })

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

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

比如下面的代码：

<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://www.mamicode.com/resources/js/zepto.js"></script>
        <script type="text/javascript" src="http://www.mamicode.com/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事件。

关于click事件300ms延迟的由来，以及随着时间的发展，遇到的问题，各家浏览器的解决方法和现在的各种js的方法，可以见http://blogs.telerik.com/appbuilder/posts/13-11-21/what-exactly-is.....-the-300ms-click-delay 准备翻译下。因为里面也介绍了fastclick,呵呵。

所以zepto的touch模块真的不是一个好的模块。。不过比我自己写的好，关键是为什么一直都不解决这个点透的问题啊。。

fastclick呢？

它的实际原理是在目标元素上绑定touchstart ,touchend事件，然后在touchend结束的时候立马执行click事件，这样就解决了“点透”的问题（实质是事件冒泡导致）以及300ms延迟问题，300ms延迟是因为浏览器为了实现用户双击屏幕放大页面（double tap to zoom 详细见我下一篇翻译吧）的效果。

FastClick.prototype.sendClick = function(targetElement, event) {
    ‘use strict‘;
    var clickEvent, touch;

    // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
    if (document.activeElement && document.activeElement !== targetElement) {
        document.activeElement.blur();
    }

    touch = event.changedTouches[0];

    // 这里就是关键，就是在这里实现了click事件
    clickEvent = document.createEvent(‘MouseEvents‘);
    clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
    clickEvent.forwardedTouchEvent = true;
    targetElement.dispatchEvent(clickEvent);
};

在touchEnd的时候会立马调用这个sendClick

FastClick.prototype.onTouchEnd = function(event){
          ......  
         this.sendClick(targetElement, event);
}

好了，这两个就是这样了。


联系
我们