fastclick.js移动端WEB开发，click,touch,tap事件浅析

建议看看：http://www.cnblogs.com/yexiaochai/p/3442220.html

一、click 和 tap 比较

两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。

处理方式：

（1）、

github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick

将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

1

2

3

$(function(){

newFastClick(document.body);

})

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。

当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击

实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。哈哈

（2）、为元素绑定touchend事件，并在内部加上e.preventDefault();

$demo.on(‘touchend’,function(e){//

改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发

$demo.hide()

e.preventDefault();//

阻止“默认行为”

})

三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件可以类比于mousedown，mouseover

，mouseup的触发。

touchstart ： 当手指触摸到屏幕会触发；

touchmove : 当手指在屏幕上移动时，会触发；

touchend : 当手指离开屏幕时，会触发；

而touchcancel许多人不知道它在什么时候会被触发而忽略它，其实当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗。

例如：

这4个事件的触发顺序为：

touchstart -> touchmove

-> …… -> touchmove ->touchend

但是单凭监听上面的单个事件，不足以满足我们去完成监听在触屏手机常见的一些手势操作，如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。

其实市面上很多框架都针对手机浏览器封装了这些手势，例如jqmobile、zepto、jqtouch，不过悲剧发生了，对于某些android系统（我自己测试到的在android 4.0.x），touchmove和touchend事件不能被很好的触发，举例子说明下：

比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove

，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart

差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 http://code.google.com/p/android/issues/detail?id=19827

暂时我只发现在android 4.0会有这个bug，据说 ios 3.x的版本也会有。

而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响，所以在直接使用这些框架的event时，或多或少会出现兼容性问题！

看看：http://amazeui.org/1.x/javascript/fastclick/

看看： http://uisource.com/project/fastclick/

处理移动端 click 事件 300 毫秒延迟， 由 FT Labs 开发，Github 项目地址：https://github.com/ftlabs/fastclick 。

为什么存在延迟？

根据 Google 开发者文档：

…mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。

兼容性

Mobile Safari on iOS 3 and upwards

Chrome on iOS 5 and upwards

Chrome on Android (ICS)

Opera Mobile 11.5 and upwards

Android Browser since Android 2

PlayBook OS 1 and upwards

不应用 FastClick 的场景

桌面浏览器；

如果 viewport meta 标签 中设置了 width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；

Copy

viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。

IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放（参考文章）。

使用方法

TODO: 修改使用接口

Copy

window.addEventListener(‘load’, function() {

FastClick.attach(document.body);

}, false);

Zepto.js:

Copy

$(function() {

FastClick.attach(document.body);

});

Copy

var attachFastClick = require(‘fastclick’);

attachFastClick(document.body);

Licence

@copyright The Financial Times Limited [All Rights Reserved]

@license MIT License