click 延時解決方案

1.click 延時解決方案

移動端 click 事件會有 300ms 的延時，原因是移動端螢幕輕按兩下會縮放(double tap to zoom) 頁面。

解決方案：

1. 禁用縮放。 浏覽器禁用預設的輕按兩下縮放行為并且去掉300ms 的點選延遲。

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

複制

2.利用touch事件自己封裝這個事件解決300ms 延遲。

原理就是：

1. 當我們手指觸摸螢幕，記錄目前觸摸時間
2. 當我們手指離開螢幕， 用離開的時間減去觸摸的時間
3. 如果時間小于150ms，并且沒有滑動過螢幕， 那麼我們就定義為點選

代碼如下:

//封裝tap，解決click 300ms 延時
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 記錄觸摸時候的時間變量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 記錄觸摸時間
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑動，有滑動算拖拽，不算點選
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指觸摸和離開時間小于150ms 算點選
                callback && callback(); // 執行回調函數
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//調用  
  tap(div, function(){   // 執行代碼  });
​           

複制

1. 使用插件。fastclick 插件解決300ms 延遲。