在按下按鈕時避免在移動設備上進行長時間打擊行爲

Question

在我的HTML中，有一個按鈕可以短按和長按。如果你很快點擊它（就像在其他每個按鈕上一樣），它會執行給定的回調函數。當您持續按下該按鈕時，將會重複執行回調，直到檢測到鼠標移動或鼠標懸停事件。

var onBtnClick = function (evt, callback) { 
     //only react to left mouse button 
     if (evt.which == 1) { 
      //save 'this' context and interval/timeout IDs 
      var self = this, 
       interval= null, 
       timeout = null; 

      //react to a single click 
      callback(); 

      //when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners 
      self.on("mouseup mouseout", function() { 
       window.clearTimeout(timeout); 
       window.clearInterval(interval); 
       self.blur(); 
       self.off("mouseup mouseout"); 
      }); 

      //on a long click call the callback function within an interval for faster value changing 
      timeout = window.setTimeout(function() { 
       interval = window.setInterval(callback, 50); 
      }, 300); 
     } 
    }, 

    i = 0, 

    cb = function() { 
     console.log(i++); 
    }; 

$("button").mousedown(function(evt) { 
    onBtnClick.call($(this), evt, cb); 
}); 

這適用於桌面環境。但是：當在移動設備上使用網站時，由於瀏覽器檢測到右擊（長按），長按不會被註冊。

是否有可能在移動設備上重新創建臺式機的行爲？我怎麼能做到這一點？

Answer 1

你將要包括touchstart和touchend事件的手機。此外，您將要確保您爲他們提供的功能包括致電evt.preventDefault()。這樣做有效地告訴手機瀏覽器「嘿，你知道你現在通常想做的事情嗎？不要那樣做。」

這就是說，你提供的應該是這樣的代碼的更新版本：

var onBtnClick = function (evt, callback) { 
     //only react to left mouse button or a touch event 
     if (evt.which == 1 || evt.type == "touchstart") { 
      //save 'this' context and interval/timeout IDs 
      var self = this, 
       interval= null, 
       timeout = null; 

      //react to a single click 
      callback(); 

      //when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners 
      self.on("mouseup mouseout touchend", function (evt) { 
       window.clearTimeout(timeout); 
       window.clearInterval(interval); 
       self.blur(); 
       self.off("mouseup mouseout touchend"); 
       evt.preventDefault(); 
      }); 

      //on a long click call the callback function within an interval for faster value changing 
      timeout = window.setTimeout(function() { 
       interval = window.setInterval(callback, 50); 
      }, 300); 
     } 
    }, 

    i = 0, 

    cb = function() { 
     console.log(i++); 
    }; 

$("button").mousedown(function(evt) { 
    onBtnClick.call($(this), evt, cb); 
}); 

$('#hold').on('touchstart', function (evt) { 
    onBtnClick.call($(this), evt, cb); 
    evt.preventDefault(); 
}); 

主要變化：新增|| evt.type == "touchstart"的，如果檢查，以便您捕捉兩個鼠標左鍵，觸摸事件，添加touchend到mouseup和mouseout事件的列表中，將evt.preventDefault()添加到清除超時的函數中，並添加了一個on('touchstart' jQuery調用，以確保您的按鈕實際上專門用於觸摸和點擊。