移動端click事件延遲300ms解決方案

移動端的瀏覽器說,為了等你是不是要放大這個頁面,我他喵的等了你300ms。

開個玩笑,不過就這么回事兒,移動端單擊會有延遲就是因為瀏覽器在判斷你是不是需要放大頁面 。但同時也造成了一種頁面反饋的遲鈍。怎么能忍呢?

說2種,解決方案如下:
1、禁止縮放

<meta name="viewport" content="width=device-width, user-scalable=no">
// 關鍵是 user-scalable = no

2、FastClick
FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發(fā)的一個輕量級的庫。

簡而言之,FastClick 在檢測到 touchend 事件的時候,會通過 DOM 自定義事件立即觸發(fā)一個模擬 click 事件,并把瀏覽器在 300 毫秒之后真正觸發(fā)的 click 事件阻止掉。

FastClick 的使用方法非常簡單,在 window load 事件之后,在body上調用 FastClick.attach() 即可。

window.addEventListener( "load", function() { 
  FastClick.attach( document.body );
});

attach 方法雖可在更具體的元素上調用,直接綁定到 body 上可以確保整個應用都能受益。

當 FastClick 檢測到當前頁面使用 meta 設置了 user-scalable=no 或者 touch-action 屬性的解決方案時,會靜默退出。

可以說,這是真正的跨平臺方案出來之前一種很好的變通方案。

就目前而言,FastClick 非常實際地解決 300 毫秒點擊延遲的問題,唯一的缺點可能也就是該腳本的文件尺寸 (盡管它只有10kb)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容