移动端300ms延迟解决的几种方法；
方案一：禁用縮放
當HTML文檔頭部包含如下meta標簽時：
表明這個頁面是不可縮放的，那雙擊縮放的功能就沒有意義了，此時瀏覽器可以禁用默認的雙擊縮放行為并且去掉300ms的點擊延遲。
這個方案有一個缺點，就是必須通過完全禁用縮放來達到去掉點擊延遲的目的，然而完全禁用縮放并不是我們的初衷，我們只是想禁掉默認的雙擊縮放行為，這樣就不用等待300ms來判斷當前操作是否是雙擊。但是通常情況下，我們還是希望頁面能通過雙指縮放來進行縮放操作，比如放大一張圖片，放大一段很小的文字。
方案二：更改默認的視口寬度
一開始，為了讓桌面站點能在移動端瀏覽器正常顯示，移動端瀏覽器默認的視口寬度并不等于設備瀏覽器視窗寬度，而是要比設備瀏覽器視窗寬度大，通常是980px。我們可以通過以下標簽來設置視口寬度為設備寬度。
因為雙擊縮放主要是用來改善桌面站點在移動端瀏覽體驗的，而隨著響應式設計的普及，很多站點都已經(jīng)對移動端坐過適配和優(yōu)化了，這個時候就不需要雙擊縮放了，如果能夠識別出一個網(wǎng)站是響應式的網(wǎng)站，那么移動端瀏覽器就可以自動禁掉默認的雙擊縮放行為并且去掉300ms的點擊延遲。如果設置了上述meta標簽，那瀏覽器就可以認為該網(wǎng)站已經(jīng)對移動端做過了適配和優(yōu)化，就無需雙擊縮放操作了。
這個方案相比方案一的好處在于，它沒有完全禁用縮放，而只是禁用了瀏覽器默認的雙擊縮放行為，但用戶仍然可以通過雙指縮放操作來縮放頁面。
方案三：CSS touch-action
網(wǎng)上很多文章把這個方案歸結為指針事件，這令我很疑惑。
以我的理解來看，指針事件的提出并不是為了解決300ms點擊延遲的，而是為了使用一個單獨的事件模型，對鼠標、觸摸、觸控等多種輸入類型進行統(tǒng)一的處理。也就是說，移動瀏覽器不用再為不同的輸入設備設計不同的事件，網(wǎng)頁的開發(fā)者也不用再為不同輸入類型的設備寫不同的事件響應代碼，而是通過統(tǒng)一的指針事件就可以開發(fā)出跨不同輸入類型終端的應用。
跟300ms點擊延遲相關的，是touch-action這個CSS屬性。這個屬性指定了相應元素上能夠觸發(fā)的用戶代理（也就是瀏覽器）的默認行為。如果將該屬性值設置為touch-action: none，那么表示在該元素上的操作不會觸發(fā)用戶代理的任何默認行為，就無需進行300ms的延遲判斷。
而設置這個CSS屬性與否，指針事件應該都是可以工作的。所以，網(wǎng)上的文章令我很疑惑，希望有大神能給我指示~ 。。~
二、點擊穿透問題
說完移動端點擊300ms延遲的問題，還不得不提一下移動端點擊穿透的問題。可能有人會想，既然click點擊有300ms的延遲，那對于觸摸屏，我們直接監(jiān)聽touchstart事件不就好了嗎？
使用touchstart去代替click事件有兩個不好的地方。
第一：touchstart是手指觸摸屏幕就觸發(fā)，有時候用戶只是想滑動屏幕，卻觸發(fā)了touchstart事件，這不是我們想要的結果；
第二：使用touchstart事件在某些場景下可能會出現(xiàn)點擊穿透的現(xiàn)象。
什么是點擊穿透？
假如頁面上有兩個元素A和B。B元素在A元素之上。我們在B元素的touchstart事件上注冊了一個回調(diào)函數(shù)，該回調(diào)函數(shù)的作用是隱藏B元素。我們發(fā)現(xiàn)，當我們點擊B元素，B元素被隱藏了，隨后，A元素觸發(fā)了click事件。
這是因為在移動端瀏覽器，事件執(zhí)行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏之后，隔了300ms，瀏覽器觸發(fā)了click事件，但是此時B元素不見了，所以該事件被派發(fā)到了A元素身上。如果A元素是一個鏈接，那此時頁面就會意外地跳轉。
作者：tsyeyuanfeng
鏈接：http://www.jianshu.com/p/6e2b68a93c88
來源：簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
方案一：引入fastclick
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>fastclick說明書</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script> </head> <body> <button id="box">click me!</button> <script type="text/javascript">/*注釋：兩個入口可選其一,引用的js包必須放到標簽上邊*///入口1：原生入口if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function(){FastClick.attach(document.body);}, false);}//入口2：jquery入口（如果使用jquery的話，使用以下入口即可）/*$(function() {FastClick.attach(document.body);});*///點擊效果document.querySelector("#box").addEventListener("click",function(){alert("click me!");},false) </script> </body> </html>
轉載于:https://www.cnblogs.com/qq364735538/p/8032246.html
總結
以上是生活随笔為你收集整理的移动端300ms延迟解决的几种方法；的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj2560串珠子 状压dp+容斥(
- 下一篇： tensorflow练习