移動端click事件延時

標籤：

在移動端使用click事件會產生300ms的延遲

問題的產生：

移動端存在雙擊放大的問題，所以在移動端點擊事件發生時，為了判斷使用者的行為（到底是要雙擊還是要點擊），瀏覽器通常會等待300ms，如果300ms之內，使用者沒有再次點擊，則判定為點擊事件，否則判定為雙擊縮放。

為什麼要解決：

線代web對效能的極致追求，對使用者體驗的高標準，讓著300ms的卡頓變得難以接受

如何解決：

1、user-scalable:no  禁止縮放——沒有縮放就不存在雙擊，也就沒有點擊延遲

2、指標事件：CSS：-ms-touch-action:none   點擊後瀏覽器不會啟用縮放操作，也就不存在延遲。然而這種方法相容性很不好。

3、FastClick庫：針對這個問題所開發的輕量級庫。FastClick在檢測到touchend事件後，會立即觸發一個類比的click事件，並把300ms後真正的click事件阻止掉

用法：

1 window.addEventListener("load",function(){2 FastClick.attach(document.body);3 });4 //雖然可以綁定到更具體的元素，但綁定到body上能使整個應用都受益

當FastClick檢測到頁面中使用了user-scalable:no或者touch-action:none方案時，會靜默退出。棒棒噠！

移動端click事件延時