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

一、click 和 tap 比較

兩者都會(huì)在點(diǎn)擊時(shí)觸發(fā)，但是在手機(jī)WEB端，click會(huì)有 200~300 ms，所以請(qǐng)用tap代替click作為點(diǎn)擊事件。

singleTap和doubleTap 分別代表單次點(diǎn)擊和雙次點(diǎn)擊。

二、關(guān)于tap的點(diǎn)透處理

在使用zepto框架的tap來(lái)移動(dòng)設(shè)備瀏覽器內(nèi)的點(diǎn)擊事件，來(lái)規(guī)避click事件的延遲響應(yīng)時(shí)，有可能出現(xiàn)點(diǎn)透的情況，即點(diǎn)擊會(huì)觸發(fā)非當(dāng)前層的點(diǎn)擊事件。

處理方式：

（1）、

github上有一個(gè)叫做fastclick的庫(kù)，它也能規(guī)避移動(dòng)設(shè)備上click事件的延遲響應(yīng)，https://github.com/ftlabs/fastclick
將它用script標(biāo)簽引入頁(yè)面（該庫(kù)支持AMD，于是你也可以按照AMD規(guī)范，用諸如require.js的模塊加載器引入），并且在dom ready時(shí)初始化在body上，如：

1

2

3

$(function(){

newFastClick(document.body);

})
然后給需要“無(wú)延遲點(diǎn)擊”的元素綁定click事件（注意不再是綁定zepto的tap事件）即可。
當(dāng)然，你也可以不在body上初始化它，而在某個(gè)dom上初始化，這樣，只有這個(gè)dom和它的子元素才能享受“無(wú)延遲”的點(diǎn)擊

實(shí)踐開發(fā)中發(fā)現(xiàn)，當(dāng)元素綁定fastclick后，click響應(yīng)速度比tap還要快一點(diǎn)點(diǎn)。哈哈

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

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

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

$demo.hide()e.preventDefault();//

阻止“默認(rèn)行為”

})

三、touch事件touch是針對(duì)觸屏手機(jī)上的觸摸事件。現(xiàn)今大多數(shù)觸屏手機(jī)webkit內(nèi)核提供了touch事件的監(jiān)聽，讓開發(fā)者可以獲取用戶觸摸屏幕時(shí)的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 這四個(gè)事件

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

，mouseup的觸發(fā)。

touchstart ： 當(dāng)手指觸摸到屏幕會(huì)觸發(fā)；

touchmove : 當(dāng)手指在屏幕上移動(dòng)時(shí)，會(huì)觸發(fā)；

touchend : 當(dāng)手指離開屏幕時(shí)，會(huì)觸發(fā)；

而touchcancel許多人不知道它在什么時(shí)候會(huì)被觸發(fā)而忽略它，其實(shí)當(dāng)你的手指還沒(méi)有離開屏幕時(shí)，有系統(tǒng)級(jí)的操作發(fā)生時(shí)就會(huì)觸發(fā)touchcancel，例如alert和confirm彈框，又或者是android系統(tǒng)的功能彈窗。

例如：

這4個(gè)事件的觸發(fā)順序?yàn)?#xff1a;

touchstart -> touchmove
-> …… -> touchmove ->touchend

但是單憑監(jiān)聽上面的單個(gè)事件，不足以滿足我們?nèi)ネ瓿杀O(jiān)聽在觸屏手機(jī)常見的一些手勢(shì)操作，如雙擊、長(zhǎng)按、左右滑動(dòng)、縮放等手勢(shì)操作。需要組合監(jiān)聽這些事件去封裝對(duì)這類手勢(shì)動(dòng)作。

其實(shí)市面上很多框架都針對(duì)手機(jī)瀏覽器封裝了這些手勢(shì)，例如jqmobile、zepto、jqtouch，不過(guò)悲劇發(fā)生了，對(duì)于某些android系統(tǒng)（我自己測(cè)試到的在android 4.0.x），touchmove和touchend事件不能被很好的觸發(fā)，舉例子說(shuō)明下：

比如手指在屏幕由上向下拖動(dòng)頁(yè)面時(shí)，理論上是會(huì)觸發(fā) 一個(gè) touchstart ，很多次 touchmove
，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發(fā)一次，觸發(fā)時(shí)間和touchstart
差不多，而touchend直接沒(méi)有被觸發(fā)。這是一個(gè)非常嚴(yán)重的bug，在google Issue已有不少人提出 http://code.google.com/p/android/issues/detail?id=19827

暫時(shí)我只發(fā)現(xiàn)在android 4.0會(huì)有這個(gè)bug，據(jù)說(shuō) ios 3.x的版本也會(huì)有。

而顯然jqmobile、zepto等都沒(méi)有意識(shí)到這個(gè)bug對(duì)監(jiān)聽實(shí)現(xiàn)帶來(lái)的嚴(yán)重影響，所以在直接使用這些框架的event時(shí)，或多或少會(huì)出現(xiàn)兼容性問(wèn)題！

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

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

處理移動(dòng)端 click 事件 300 毫秒延遲， 由 FT Labs 開發(fā)，Github 項(xiàng)目地址：https://github.com/ftlabs/fastclick 。

為什么存在延遲？

根據(jù) Google 開發(fā)者文檔：

…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.
從點(diǎn)擊屏幕上的元素到觸發(fā)元素的 click 事件，移動(dòng)瀏覽器會(huì)有大約 300 毫秒的等待時(shí)間。為什么這么設(shè)計(jì)呢？ 因?yàn)樗肟纯茨闶遣皇且M(jìn)行雙擊（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
不應(yīng)用 FastClick 的場(chǎng)景

桌面瀏覽器；
如果 viewport meta 標(biāo)簽 中設(shè)置了 width=device-width， Android 上的 Chrome 32+ 會(huì)禁用 300ms 延時(shí)；
Copy

viewport meta 標(biāo)簽如果設(shè)置了 user-scalable=no，Android 上的 Chrome（所有版本）都會(huì)禁用 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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。