http://www.tuicool.com/articles/VniQRr

http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html

之前翻译过一篇关于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="/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,呵呵。

所以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 解决js穿透问题的更多相关文章

  1. 用Fastclick解决移动端300ms延迟问题

    移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击. 为了能够立即响应用户的点击事件,才有了FastClick. 用法: 引入fastclick. ...

  2. 爬虫：selenium + phantomjs 解决js抓取问题(一)

    selenium模块主要用来做测试,模拟键盘.鼠标来操作浏览器. phantomjs 就像一个无界面的浏览器一样. 两个结合能很好的解决js抓取的问题. 测试代码: #coding=utf-8 fro ...

  3. bower解决js的依赖管理

    bower解决js的依赖管理 前言: 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery,去官网下载名为jquery-1.10.2.min.js文件,放到我们的项目 ...

  4. 解决js跨域问题

    如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨 ...

  5. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  6. 使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  7. pyspider示例代码一：利用phantomjs解决js问题

    本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下 ...

  8. 如何解决js跨域问题

    Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些a ...

  9. Java模拟并解决缓存穿透

    什么叫做缓存穿透 缓存穿透只会发生在高并发的时候,就是当有10000个并发进行查询数据的时候,我们一般都会先去redis里面查询进行数据,但是如果redis里面没有这个数据的时候,那么这10000个并 ...

随机推荐

  1. 实践总结 - 不可错过的Angular应用技巧

    angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeo ...

  2. js点击后将文字复制到剪贴板,将图片复制到剪贴板

    复制文字: <table width="99%" border="0" cellpadding="0" cellspacing=&qu ...

  3. 【学】AngularJS日记（2）

    数组循环放到新生成的li中 <ul ng-init="arr=[12,5,6,394,344]"> <li ng-repeat="item in arr ...

  4. 【学】AngularJS日记（1） - 常用工具

    angular.isArray(a) 判断a是否为数组 angular.isDate 是否为时间对象 angular.isDefined 判断元素是否存在 angular.isUndefined an ...

  5. 为什么使用 Redis及其产品定位

    摘自:http://www.infoq.com/cn/articles/tq-why-choose-redis 传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储 ...

  6. WindowsFormsHost使用问题

    WindowsFormsHost使用问题 WPF WindowsFormsHost 类 允许在 WPF 页面上承载 Windows Forms控件的元素. 命名空间:  System.Windows. ...

  7. Spring AOP不拦截从对象内部调用的方法原因

    拦截器的实现原理很简单,就是动态代理,实现AOP机制.当外部调用被拦截bean的拦截方法时,可以选择在拦截之前或者之后等条件执行拦截方法之外的逻辑,比如特殊权限验证,参数修正等操作. 但是最近在项目中 ...

  8. Junit4参数化测试实现程序与用例数据分离

    http://touchfu.iteye.com/blog/732930 现状:你是不是还在为自己的TestCase代码杂乱无章而苦恼,咎其根本还在于针对不同的用例,输入参数和mock信息的组装全部作 ...

  9. 表在用时建索引要加ONLINE

    因为: 源地址:https://zhidao.baidu.com/question/585392982737434725.html 一般建立索引会引起锁表,不允许进行数据更新等DML操作: 如果建立索 ...

  10. linux mutext spinlock 性能分析

    http://www.parallellabs.com/2010/01/31/pthreads-programming-spin-lock-vs-mutex-performance-analysis/ ...