問(wèn)題的發(fā)現(xiàn)

? ? ? 上班做項(xiàng)目的時(shí)候碰到一個(gè)移動(dòng)端項(xiàng)目，其中有個(gè)小游戲，相當(dāng)于天上掉餡餅，用戶需要點(diǎn)擊餡餅獲得。游戲做好之后在pc端測(cè)試是沒(méi)問(wèn)題的，安卓手機(jī)上測(cè)試也是沒(méi)問(wèn)題的，但是部分蘋(píng)果手機(jī)就出現(xiàn)了問(wèn)題，用戶點(diǎn)擊餡餅沒(méi)有反應(yīng)。

? ? ??后來(lái)調(diào)試的時(shí)候，我讓這些餡餅靜止在屏幕上，這些蘋(píng)果手機(jī)用戶就可以點(diǎn)擊了。才發(fā)現(xiàn)是因?yàn)辄c(diǎn)擊事件延遲的原因?qū)е乱苿?dòng)的對(duì)象不能被用戶點(diǎn)擊，經(jīng)過(guò)一定時(shí)間的延遲，該對(duì)象已經(jīng)移到到其他地方去了。

? ? ??移動(dòng)端頁(yè)面對(duì)于點(diǎn)擊事件會(huì)有300毫秒的延遲，也就是js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，導(dǎo)致多數(shù)用戶感覺(jué)移動(dòng)設(shè)備上基于HTML的web應(yīng)用界面響應(yīng)速度慢，甚至有時(shí)候會(huì)影響一些業(yè)務(wù)邏輯的處理。

為什么會(huì)存在延遲？

? ? ??Google開(kāi)發(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.

? ? ??移動(dòng)瀏覽器為什么會(huì)設(shè)置300毫秒的等待時(shí)間呢？這與雙擊縮放的方案有關(guān)。平時(shí)我們有可能已經(jīng)注意到了，雙擊縮放，即用手指在屏幕上快速點(diǎn)擊兩次，可以看到內(nèi)容或者圖片放大，再次雙擊，瀏覽器會(huì)將網(wǎng)頁(yè)縮放至原始比例。

? ? ??瀏覽器捕獲第一次單擊后，會(huì)先等待一段時(shí)間，如果在這段時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊事件的處理。如果這段時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)做雙擊事件處理。這段時(shí)間就是上面提到的300毫秒延遲。

如何避免延遲

? ? ? 在特定場(chǎng)景如一些游戲頁(yè)面，我們需要取消300毫毛的延遲。目前有以下方法：

方法一：靜止縮放

<meta name="viewport" content="width=device-width user-scalable= 'no'">
? ? ??使用這個(gè)方法必須完全禁用縮放來(lái)達(dá)到目的，雖然大部分移動(dòng)端能解決這個(gè)延遲問(wèn)題，但是部分蘋(píng)果手機(jī)還是不行。

方法二：fastclick.js

? ? ??FastClick 是 FT Labs 專(zhuān)門(mén)為解決移動(dòng)端瀏覽器 300 毫秒點(diǎn)擊延遲問(wèn)題所開(kāi)發(fā)的一個(gè)輕量級(jí)的庫(kù)。簡(jiǎn)而言之，FastClick 在檢測(cè)到touchend事件的時(shí)候，會(huì)通過(guò) DOM 自定義事件立即觸發(fā)一個(gè)模擬click事件，并把瀏覽器在 300 毫秒之后真正觸發(fā)的click事件阻止掉。使用方法如下。

? ? ??第一步：在頁(yè)面中引入fastclick.js文件。

? ? ??第二步：在js文件中添加以下代碼
? ? ??在 window load 事件之后，在body上調(diào)用FastClick.attach()即可。

window.addEventListener(function(){ FastClick.attach( document.body ); },false );
? ? ??如果你項(xiàng)目使用了JQuery，就將上面的代碼改寫(xiě)成：

$(function() { FastClick.attach(document.body); });

方法三：指針事件

? ? ??指針事件最初由微軟提出，現(xiàn)已進(jìn)入 W3C 規(guī)范的候選推薦標(biāo)準(zhǔn)階段 (Candidate Recommendation)。指針事件是一個(gè)新的 web 事件系列，相應(yīng)的規(guī)范旨在使用一個(gè)單獨(dú)的事件模型，對(duì)所有輸入類(lèi)型，包括鼠標(biāo) (mouse)、觸摸 (touch)、觸控 (stylus) 等，進(jìn)行統(tǒng)一的處理。

? ? ??指針事件 (Pointer Events) 目前兼容性不太好，不知道在以后會(huì)不會(huì)更加支持。

注意事項(xiàng)

? ? ? 要注意使用場(chǎng)景。

? ? ??

? ? ??文中表述僅代表個(gè)人觀點(diǎn)，如果有更好的方法，歡迎分享。

總結(jié)

以上是生活随笔為你收集整理的移动端点击（click）事件延迟问题的产生与解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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