問題描述

移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生

解決方案

方法一：全局禁止縮放

1. 在html頁面頭部的meta標籤中加上content="user-scalable=no"

<meta content="user-scalable=no">

1. 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時
2. 適用場景：需要對整個頁面進行禁用雙擊行為。但是一般不常用。

方法二：封裝tap函數解決300ms延遲

1. 原理

   1. 當手指觸摸屏幕，記錄當前觸摸時間
   2. 當手指離開屏幕，用離開時間減去觸摸時間
   3. 如果時間小於150ms，並且沒有滑動過屏幕，那麼將這行為近似作為點擊事件來處理，並完成相應的點擊處理函數
2. 實現代碼

    /**
     * 封裝tap 解決移動端click事件300ms延時問題
     * @param obj 監聽對象
     * @param callback 執行的函數
     */
    function tap(obj,callback) {
    // 判斷是否滑動的標誌位
    var isMove = false;
    // 記錄觸摸開始時間
    var startTime = 0;
    // 開始觸摸 記錄開始觸摸時間
    obj.addEventListener('touchstart',function (e) {
        startTime = Date.now();
    })

    // 開始滑動 改變滑動標誌位 有滑動 算拖拽 不算點擊
    obj.addEventListener('touchmove',function () {
        isMove = true;
    })

    // 手指離開屏幕
    obj.addEventListener('touchend',function () {
        // 如果為滑動事件 則直接掠過  如果不是滑動事件且 時間小於150ms則認為是點擊操作 將執行點擊業務邏輯，也即回調函數callback()
        if (isMove && (Date.now() - startTime < 150)) {
        // 如果有回調函數 則執行回調函數中的業務邏輯
            callback && callback();
        }
        // 重置標誌位
        isMove = false;
        startTime = 0;
    })
}

// 調用
    tap(div,function () {
        // 執行業務邏輯
    })

3.使用弊端：每個元素都需要調用該函數，如果存在上百個頁面元素，則需要調用一百次該事件，非常不方便

方法三：fastclick插件

1. 作用：解決移動端click事件300ms延時問題
2. 使用好處：一個代碼便解決所有頁面元素click300ms延時問題，之後便可以正常寫元素click事件
3. github官網地址點擊此處.

4. 用法

   1. 下載fastclick.js文件
   2. 引入fastclick.js文件
   3. 使用

    // 消除所有元素click延時
   if ('addEventListener' in document) {
       document.addEventListener('DOMContentLoaded', function() {
           FastClick.attach(document.body);
       }, false);
   }
   
   // 當使用click事件時 不會再有300ms延時
   div.addEventListener('click',function () {
       // 業務處理
   })