Android 浏览器在鼠标按下 1 秒后长时间保持禁用/鼠标向上答案

【问题标题】：Android browsers long hold disable/ mouse up after 1second of mousedownAndroid 浏览器在鼠标按下 1 秒后长时间保持禁用/鼠标向上
【发布时间】：2017-04-01 01:13:37
【问题描述】：

我正在尝试在 HTML5 画布上构建一键式游戏。这是一款借助本教程制作的跑步游戏：

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

我将现有控件从空格键更改为鼠标单击。它可以在除 Android 设备移动浏览器之外的所有平台上完美运行。

在 Android 设备中，触摸会使用户跳跃。如果长时间保持触摸，即使松开触摸，用户也会继续跳跃。 iPhone、iPad 或台式机不会出现此问题。

我可以制作一个 Javascript 函数，其中鼠标按下一定秒数会被切断吗？比如：

if(mousedown for 1sec)
    mouseup;

如果您能想到另一种方法，请告诉我。

【问题讨论】：

标签： javascript android html canvas mouseevent

【解决方案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 获取有关触摸事件的优秀教程。

【讨论】：