之前翻译过一篇关于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. Spring系列之AOP实现的两种方式

    AOP常用的实现方式有两种,一种是采用声明的方式来实现(基于XML),一种是采用注解的方式来实现(基于AspectJ). 首先复习下AOP中一些比较重要的概念: Joinpoint(连接点):程序执行 ...

  2. API接口：分页

    // 查询满足要求的总记录数 $count = M("back")->where($back_map)->count(); $pagecount = ceil($cou ...

  3. D：Wordpress_AFC插件常用代码

    获取自定义变量 //输出自定义字段title的值<?php the_field('title','options'); ?> //获取自定义字段title的值 <?php echo ...

  4. R中的<-和=赋值符号的细致区别

    <-创建的变量的作用范围可以在整个顶层环境,而=仅仅在一个局部环境. 但要<-创建的变量如果是在函数实参传递的时候创建的,其的作用范围可以在整个顶层环境,有一个前提条件:对应的形参在函数内 ...

  5. solr-web界面增加登录认证

    目录 配置tomcat-user.xml 配置web.xml 界面展示 回到顶部 配置tomcat-user.xml 找到 tomcat 下 conf 文件下增加 tomcat-user.xml &l ...

  6. [Search Engine] 搜索引擎技术之网络爬虫

    随着互联网的大力发展,互联网称为信息的主要载体,而如何在互联网中搜集信息是互联网领域面临的一大挑战.网络爬虫技术是什么?其实网络爬虫技术就是指的网络数据的抓取,因为在网络中抓取数据是具有关联性的抓取, ...

  7. UI第九节——UIStepper

    - (void)viewDidLoad {    [super viewDidLoad];        // 实例化UIStepper,大小是固定的    UIStepper *stepper = ...

  8. 公众平台关注用户达到5万即可开通流量主功能 可以推广APP应用

    今天微信公众平台发布发布了一些更新,公众帐号的关注用户达到5万,即可开通流量主功能,之前的是要求10万粉丝,这是一个微信开放的信号.广告主可推广苹果商店应用或腾讯开放平台应用.新增卡片和图文广告规格. ...

  9. 最短JavaScript判断是否为IE6、IE的方法

    常用的 JavaScript 检测浏览器为 IE 是哪个版本的代码,包括是否是最人极端厌恶的 ie6 识别与检测. var isIE=!!window.ActiveXObject; var isIE6 ...

  10. C和指针 第十三章 习题

    1,1标准输入读入字符,统计各类字符所占百分比 #include <stdio.h> #include <ctype.h> //不可打印字符 int isunprint(int ...