之前翻译过一篇关于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事件。

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

今天看到了别人的翻译稿，拿过来啦，http://thx.github.io/mobile/300ms-click-delay/

所以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);

}

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

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

  1. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  2. 【原】相煎何太急——input的blur事件与button的click事件

    先来一段引子,最近在写手机h5页面,主要是一些登陆注册方面的,最绕不开的就是表单元素. 我想实现的是:在输入框后边有一个删除图标,当输入东西的时候触发事件,显示删除图标,点击该图标会删除之前输入的内容 ...

  3. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  4. zepto的tap事件的点透问题的几种解决方案

    你可能碰到过在页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 以前,我也听到过tap的点 ...

  5. zepto的tap事件的穿透分析

    首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...

  6. 解决触摸屏设备click事件300ms的延迟的问题

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待 ...

  7. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  8. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  9. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

随机推荐

  1. MySQL随机获取数据的方法，支持大数据量

    最近做项目,需要做一个从mysql数据库中随机取几条数据出来. 总所周知,order by rand 会死人的..因为本人对大数据量方面的只是了解的很少,无解,去找百度老师..搜索结果千篇一律.特发到 ...

  2. C语言基础(3)-二进制、八进制、十六进制

    1.二进制 一个位只能表示0或者1两种状态,简称bit(比特) 一个字节为8个二进制数,称为8位,简称BYTE(字节) 一个字为2个字节,简称WORD. 两个字为双字,简称DWORD,占32个bit ...

  3. HTML的初体验

    有话先说:记得初次接触HTML代码还是在两年多前的事情,那是只是凭着一时的兴趣.却不知一入HTML深似海,再见依旧还是兴趣或许就是美好生活的必备. 不用说的是HTML是制作网页,网站开发必须要掌握并学 ...

  4. PHP错误级别 error_reporting() 函数详解

    在PHP开发的时候常常会用到error_reporting(report_level)来调试自己的程序,下面列出了report_level可能值: 值 常量 描述 1 E_ERROR 这是一个严重错误 ...

  5. PHP的继承方法如何获取子类名？get_class() 和 get_called_class()

    PHP里的__CLASS__这类东西是静态绑定的,如果不在子类里重载的话,那么继承父类方法所得到的依旧是父类的名称,而不是子类的名称,比如: <?php class A { function _ ...

  6. MySQL 拷贝数据库表方式备份，还原后提示 table xxx '' doesn`t exist

    MySQL很强大,支持直接拷贝数据库文件快速备份,那数据库文件在哪里呢? 打开MySQL的配置文件 my.ini,找到 datadir 节点,如 datadir="D:/Program Fi ...

  7. Zookeeper异常ConnectionLossException解决

    项目中要求做一个将配置文件读取到zookeeper节点上的工具: 开发代码如下: 但是当连接到远端的Zookeeper服务之后,出现了下面异常: Exception in thread "m ...

  8. SoapUI 设置 request data with json body

    --背景 使用WCF定义REST风格的WebService,如下: [ServiceContract]    public interface INISTService    {        [Op ...

  9. Sass安装（windows版）

    Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...

  10. http升https笔记

    证书申请的: 1.lets encrypt 国际公益项目发展很快的,不过在国内暂时有些支持度还不够高,如微信安卓版就不认lets encrypt的证书.跳转进去一直处于空白页状态 2.沃通证书  国内 ...