在1秒的mousedown之后，Android瀏覽器長時間保持禁用/鼠標

Question

我正在嘗試在HTML5畫布上構建一鍵式游戲。 這是在本教程的幫助下制作的正在運行的游戲：

http://blog.sklambert.com/html5-game-tutorial-game-ui-canvas-vs-dom/

我將現有的控件從空格鍵更改為鼠標單擊。 它適用於除Android設備移動瀏覽器之外的所有平台。

在Android設備中，觸摸使用戶跳躍。 如果觸摸有長時間保持，即使觸摸被釋放，用戶也會繼續跳躍。 在iPhone或iPad或台式機中不會發生此問題。

我可以制作一個Javascript函數，其中鼠標按下一定的秒數被切斷？ 就像是：

if(mousedown for 1sec)
    mouseup;

如果你能想到另一種方法，請告訴我。

Answer 1

您可以使用觸摸事件而不是鼠標來啟用觸控設備。 參考： https ： //developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

function is_touch_device() {
  /* Function code taken from http://stackoverflow.com/a/4819886/3946520 */
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if(is_touch_device()) {
    canvas.addEventListener('touchstart', handleTouchStart, false);
    canvas.addEventListener('touchend', handleTouchEnd, false);
}
else {
    // Bind Mouse Events
}

function handleTouchStart(e) {
    // This code runs when user touches the canvas i.e. on touch start
}

function handleTouchEnd(e) {
    // This code runs when user removes finger from canvas i.e. on touch end
}

另請注意，可能存在用戶將兩個或更多手指放在畫布上的情況。 他們每個人都會舉起'touchstart'活動。 所以你必須處理它。 您可以參考http://www.javascriptkit.com/javatutors/touchevents.shtml獲取有關觸摸事件的精彩教程。