fastclick.js移動端WEB開發，click,touch,tap事件淺析建議看看：http://www.cnblogs.com/yexiaochai/p/3442220.html 看看：http://amazeui.org/1.x/javascript/fastclick/ 看看： http://uisource.com/project/fastclick/

一、click 和 tap 比較

兩者都會在點選時觸發，但是在手機WEB端，click會有 200~300 ms，是以請用tap代替click作為點選事件。

singleTap和doubleTap 分别代表單次點選和雙次點選。

二、關于tap的點透處理

在使用zepto架構的tap來移動裝置浏覽器内的點選事件，來規避click事件的延遲響應時，有可能出現點透的情況，即點選會觸發非目前層的點選事件。

處理方式：

（1）、

将它用script标簽引入頁面（該庫支援AMD，于是你也可以按照AMD規範，用諸如require.js的子產品加載器引入），并且在dom ready時初始化在body上，如：

1

2

3

$(function(){

})

然後給需要“無延遲點選”的元素綁定click事件（注意不再是綁定zepto的tap事件）即可。

當然，你也可以不在body上初始化它，而在某個dom上初始化，這樣，隻有這個dom和它的子元素才能享受“無延遲”的點選

實踐開發中發現，當元素綁定fastclick後，click響應速度比tap還要快一點點。哈哈

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

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

改變了事件名稱，tap是在body上才被觸發，而touchend是原生的事件，在dom本身上就會被捕獲觸發

阻止“預設行為”

三、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

暫時我隻發現在android 4.0會有這個bug，據說 ios 3.x的版本也會有。

而顯然jqmobile、zepto等都沒有意識到這個bug對監聽實作帶來的嚴重影響，是以在直接使用這些架構的event時，或多或少會出現相容性問題！

為什麼存在延遲？

根據 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: 修改使用接口

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

FastClick.attach(document.body);

}, false);

Zepto.js:

$(function() {

});

var attachFastClick = require(‘fastclick’);

attachFastClick(document.body);

Licence

@copyright The Financial Times Limited [All Rights Reserved]

@license MIT License