移動端的300ms延遲和點擊穿透

移動端300ms延遲：假定這麼一個場景。用戶在 瀏覽器裏邊點擊了一個連接。因爲用戶能夠進行雙擊縮放或者雙擊滾動的操做，當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是確實要打開這個連接，仍是想要進行雙擊操做。所以，瀏覽器 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。也就是說，當咱們點擊頁面的時候移動端瀏覽器並非當即做出反應，而是會等上一小會兒纔會出現點擊的效果。

點擊穿透：假如頁面上有兩個元素A和B。B元素在A元素之上。咱們在B元素的touchstart事件上註冊了一個回調函數，該回調函數的做用是隱藏B元素。咱們發現，當咱們點擊B元素，B元素被隱藏了，隨後，A元素觸發了click事件。這是由於在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏以後，隔了300ms，瀏覽器觸發了click事件，可是此時B元素不見了，因此該事件被派發到了A元素身上。若是A元素是一個連接，那此時頁面就會意外地跳轉。

300ms延遲解決方案：
(1) 禁用縮放，在html文檔頭部加meta標籤以下：
<meta name=」viewport」 content=」user-scalable=no」/>

(2) 更改默認的視口寬度 （響應式佈局，消除了站點上可能存在的雙擊綻開的請求）
<meta name=」viewport」 content=」width=device-width」/>

(3) Css touch-action
touch-action:none;在該元素上的操做不會觸發用戶代理的任何行爲，無需進行3000ms延遲判斷。

(4) FastClick爲解決移動端瀏覽器300毫秒延遲開發的一個輕量級的庫
點擊穿透解決方案：
（1）只用touch
（2）只用click
（3）tap後延遲350ms再隱藏mask
（4）pointer-events