移动端300ms延迟解决的几种方法；
方案一：禁用縮放
當HTML文檔頭部包含如下meta標簽時：
表明這個頁面是不可縮放的，那雙擊縮放的功能就沒有意義了，此時瀏覽器可以禁用默認的雙擊縮放行為并且去掉300ms的點擊延遲。
這個方案有一個缺點，就是必須通過完全禁用縮放來達到去掉點擊延遲的目的，然而完全禁用縮放并不是我們的初衷，我們只是想禁掉默認的雙擊縮放行為，這樣就不用等待300ms來判斷當前操作是否是雙擊。但是通常情況下，我們還是希望頁面能通過雙指縮放來進行縮放操作，比如放大一張圖片，放大一段很小的文字。
方案二：更改默認的視口寬度
一開始，為了讓桌面站點能在移動端瀏覽器正常顯示，移動端瀏覽器默認的視口寬度并不等于設備瀏覽器視窗寬度，而是要比設備瀏覽器視窗寬度大，通常是980px。我們可以通過以下標簽來設置視口寬度為設備寬度。
因為雙擊縮放主要是用來改善桌面站點在移動端瀏覽體驗的，而隨著響應式設計的普及，很多站點都已經對移動端坐過適配和優化了，這個時候就不需要雙擊縮放了，如果能夠識別出一個網站是響應式的網站，那么移動端瀏覽器就可以自動禁掉默認的雙擊縮放行為并且去掉300ms的點擊延遲。如果設置了上述meta標簽，那瀏覽器就可以認為該網站已經對移動端做過了適配和優化，就無需雙擊縮放操作了。
這個方案相比方案一的好處在于，它沒有完全禁用縮放，而只是禁用了瀏覽器默認的雙擊縮放行為，但用戶仍然可以通過雙指縮放操作來縮放頁面。
方案三：CSS touch-action
網上很多文章把這個方案歸結為指針事件，這令我很疑惑。
以我的理解來看，指針事件的提出并不是為了解決300ms點擊延遲的，而是為了使用一個單獨的事件模型，對鼠標、觸摸、觸控等多種輸入類型進行統一的處理。也就是說，移動瀏覽器不用再為不同的輸入設備設計不同的事件，網頁的開發者也不用再為不同輸入類型的設備寫不同的事件響應代碼，而是通過統一的指針事件就可以開發出跨不同輸入類型終端的應用。
跟300ms點擊延遲相關的，是touch-action這個CSS屬性。這個屬性指定了相應元素上能夠觸發的用戶代理（也就是瀏覽器）的默認行為。如果將該屬性值設置為touch-action: none，那么表示在該元素上的操作不會觸發用戶代理的任何默認行為，就無需進行300ms的延遲判斷。
而設置這個CSS屬性與否，指針事件應該都是可以工作的。所以，網上的文章令我很疑惑，希望有大神能給我指示~ 。。~
二、點擊穿透問題
說完移動端點擊300ms延遲的問題，還不得不提一下移動端點擊穿透的問題。可能有人會想，既然click點擊有300ms的延遲，那對于觸摸屏，我們直接監聽touchstart事件不就好了嗎？
使用touchstart去代替click事件有兩個不好的地方。
第一：touchstart是手指觸摸屏幕就觸發，有時候用戶只是想滑動屏幕，卻觸發了touchstart事件，這不是我們想要的結果；
第二：使用touchstart事件在某些場景下可能會出現點擊穿透的現象。
什么是點擊穿透？
假如頁面上有兩個元素A和B。B元素在A元素之上。我們在B元素的touchstart事件上注冊了一個回調函數，該回調函數的作用是隱藏B元素。我們發現，當我們點擊B元素，B元素被隱藏了，隨后，A元素觸發了click事件。
這是因為在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏之后，隔了300ms，瀏覽器觸發了click事件，但是此時B元素不見了，所以該事件被派發到了A元素身上。如果A元素是一個鏈接，那此時頁面就會意外地跳轉。
作者：tsyeyuanfeng
鏈接：http://www.jianshu.com/p/6e2b68a93c88
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
方案一：引入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延迟解决的几种方法；的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj2560串珠子 状压dp+容斥(
- 下一篇： tensorflow练习