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. rake :You have already activated rake 10.1.0

    rake aborted! You have already activated rake 10.1.0, but your Gemfile requires rake 10.0.3. Using b ...

  2. ASP.Net上传大文件解决方案之IIS7.0下的配置

    开源的Brettle.Web.NeatUpload.在公司IIS6.0使用正常,但是在Windows 2008 server IIS7上使用不正常.在网上看到一个解决办法但是没有效果 IIS 7 默认 ...

  3. TP中的session和cookie

    session:1.session('name','value');  //设置session2.$value = session('name');  // 获取所有的session 3.2.2版本新 ...

  4. parse output

    if ((line = br.readLine()).contains("PID")){ TestResultDTO t = new TestResultDTO(); t.pid ...

  5. C#中属性与字段的用法

    //People.cs public class People { //字段 private string _name; //属性 作用:保护字段,对字段的取值和赋值进行限定,限制非法字段的摄入 pu ...

  6. Python 之 装饰器的写法

    普通装饰器 1. 不带参数的普通装饰器 from functools import wraps def use_logging(func): @wraps(func) # 使得装饰器函数和原函数有一样 ...

  7. Django 之 ForeignKey、ManyToMany的访问方式

    1.ForeignKey 情况I: from django.db import models class Blog(models.Model): pass class Entry(models.Mod ...

  8. SQL Server 数据库备份

    declare @filename varchar(1024) declare @SQLDB varchar(50) declare @path varchar(1024) set @path = N ...

  9. Tiny_4412的NFS挂载

    设备连接:          交叉网线          串口线          usb线          电源线 网络设置: 笔记本ubuntu:wifi处,设置IPv4设置“仅本地连接”,不要 ...

  10. 思考力——提升企业竞争力的核心因素

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 · 思考力就是竞争力:在这个科技飞跃进步的时代,很多事物是我们未曾经历也难以预料的. ...