在移動端使用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());4//
雖然可以繫結到更具體的元素,但繫結到body上能使整個應用都受益
當fastclick檢測到頁面中使用了user-scalable:no或者touch-action:none方案時,會靜默退出。棒棒噠!
移動端模擬click事件
移動端click事件會有300ms延遲 所以用touch事件來模擬click事件,來達到點選無延遲 在這裡主要使用touch事件來控制開關,來區分手指移動還是點選情況 var onoff true 手指觸控就會觸發touchstart事件,這裡不能省略,否則onoff狀態不會再次生效 div1 on...
移動端click事件300ms延遲
一般情況下,如果沒有經過特殊處理,移動端瀏覽器在派發點選事件的時候,通常會出現300ms左右的延遲。也就是說,當我們點選頁面的時候移動端瀏覽器並不是立即作出反應,而是會等上一小會兒才會出現點選的效果。在移動web興起的初期,使用者對300ms的延遲感覺不明顯。但是,隨著使用者對互動體驗的要求越來越高...
解決移動端click點選問題
1,為什麼移動端點選會有300ms的延遲呢?從點選螢幕上的元素到觸發元素的click事件,移動瀏覽器會有大約 300 毫秒的等待時間。這是因為瀏覽器想看看你是不是要進行雙擊 double tap 操作。2,相容性 3,如何使用 script type src path to fastclick.js...