1. 程式人生 > >移動端點選事件300ms延遲問題解決方案——fastclick.js

移動端點選事件300ms延遲問題解決方案——fastclick.js

   

  移動端點選事件300ms延遲的問題由來已久,如下截圖

  

  下面截圖來自原文:https://www.jianshu.com/p/6e2b68a93c88

 

 

 

  網上關於300ms延遲問題的解決方法,大致分為 3 種

 

  ①:使用 meta viewport 屬性禁用縮放,並讓視口寬度等於裝置寬度

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>

  

  ②:使用 touch-action:none;  這句程式碼的意思是 禁止觸發預設的手勢操作

    個人不推薦這個方法,之前寫過一篇部落格,因使用了該屬性後踩的坑

    詳見:https://www.cnblogs.com/tu-0718/p/7411907.html

   

  ③:使用FastClick.js庫

      FastClick是專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。

      FastClick的實現原理是在檢測到touchend事件的時候

    會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之後的click事件阻止掉



 

 

  個人推薦 FastClick.js ,下面簡述一下使用方法以及注意事項

      ①:首先引入 FastClick.js 檔案

      ②:呼叫 FastClick.attach() 方法,呼叫該方法的寫法有 3 種 ,如下

 

    js

    window.onload = function() {
                FastClick.attach(document.body);    
            }

 

 

    if('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {   
                    FastClick.attach(document.body);                        
                });
                 
            }

 

 

    jquery

  $(function() {
        FastClick.attach(document.body);
    });

 

 

  注:引用了 Fastclick.js 後,就只能用 addEventListener 繫結事件,而不能直接用 element.click 的方式新增事件

    否則可能會出現點選事件不觸發,或觸發以後不執行方法

 

   這樣可以的

    element.addEventListener('click', function() {
                element.className = 'tu-mask';
                element.style.display = "block";
            });

 

  這樣就不行了

    element.click = function() {
                element.className = 'tu-mask';
                element.style.display = "block";
            }