建議看看：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

總結

以上是生活随笔為你收集整理的fastclick.js移动端WEB开发，click,touch,tap事件浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。