之前翻译过一篇关于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. SSH搭建

    1.首先在lib中导入ssh需要的jar包: 如图: 2.其次配置web.xml (在WEB-INF目录下) <?xml version="1.0" encoding=&qu ...

  2. 如何处理 在html中 li 的高度自适应（且li里面的内容有浮动的情况下）

    废话不多说,我们写贴出代码 这个是 Html 代码 <div class="main"> <ul> <li> <div class=&qu ...

  3. go智能提示（重要）

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  4. ACM 计算几何中的精度问题（转）

    http://www.cnblogs.com/acsmile/archive/2011/05/09/2040918.html 计算几何头疼的地方一般在于代码量大和精度问题,代码量问题只要平时注意积累模 ...

  5. python练手基础

    Python相关文档0.1. Python标准文档0.2. Python实用大全0.3. 迷人的Python0.4. 深入理解Python0.5. Python扩展库网址 http://pypi.py ...

  6. java final 关键字

    1.修饰类当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用final进行修饰.final类中的成员变量可以根据需要设为final,但是要注意fina ...

  7. hadoop 2.6 centos 7.1 下的一些操作

    开启hdfs: start-dfs.sh 开启yarn: start-yarn.sh 查看hdfs:http://ip:50070/ 查看RM:http://ip:8088/

  8. MVC与MVVM区别？

    在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑. MVC模型关注的是Model的不变,所以,在MVC模型里,Model不依赖于Vi ...

  9. ecshop调用后台指定广告位下所有广告循环

    ecshop本身的广告调用规则是:对某个广告位下的广告列表随机显示其中一条. 而我们有时需要将某个广告位下的所有广告全部显示出来,那么如何处理呢,下面就自己做了一个函数: \includes\lib_ ...

  10. java基本算法之快速排序

    快速排序:是找出一个元素(理论上可以随便找一个)作为基准(pivot),然后对数组进行分区操作,使基准左边元素的值都不大于基准值,基准右边的元素值 都不小于基准值,如此作为基准的元素调整到排序后的正确 ...