移動端的瀏覽器說,為了等你是不是要放大這個頁面,我他喵的等了你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)。