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. highchart 中数据千分位显示为空格而不是逗号的解决方案

    thousandsSep: String   一千的分隔符 在highcharts.js 中找到  thousandsSep位置,把"" 改为  ","

  2. Mysql大范围分页优化案例

    在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...

  3. 使用git新建分支以及管理分支

    在进行分支相关的操作前, 我们需要保持主分支干净, 所谓的干净就是没有任何改变(所有更改都已经commit 并 push),那么你可以在任何时候从你的主分支创建一个新分支. 为了方便代码管理,我们应该 ...

  4. Xxtea加解密

    转自:http://www.cnblogs.com/luminji/p/3406407.html 很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码, ...

  5. 【转】ORACLE定期清理INACTIVE会话

    源地址:http://www.cnblogs.com/kerrycode/p/3636992.html ORACLE数据库会话有ACTIVE.INACTIVE.KILLED. CACHED.SNIPE ...

  6. Java 反射 getDeclareFields getModifiers setAccessible(true)

    示例代码: public static Map<String, Object> dtoToMap(Object obj, String pre,            String las ...

  7. Retina Display and Eclipse Mac视网膜屏和Eclipse

    I have a Retina Display and Eclipse looks blurry. How can I fix it? You need to tell Mac OS that Ecl ...

  8. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

  9. java 项目创建中的问题汇总

    eclipse 创建maven项目时 报错 Unable to create project from archetype [org.apache.maven.archetypes:ma 你看看你ma ...

  10. java中static 和 final 的一些使用规则

    一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...