如何防止 Canvas 在移动设备上表现得像图像？答案

【问题标题】：How to prevent Canvas to act like an Image on Mobile?如何防止 Canvas 在移动设备上表现得像图像？
【发布时间】：2016-04-21 00:00:51
【问题描述】：

我有一个交互式画布，您可以在其中单击一些按钮。但是当我在手机上测试它并尝试点击按钮时，它并没有立即做出反应。我必须按下并等待操作。

在这里测试：http://choix.me/labor/canvas/car.html

这里是 upBtn 的 javascript 代码：

    this.upBtn.addEventListener("mousedown", upClick.bind(this));
    this.upBtn.addEventListener("click", upRelease.bind(this));

    function upClick()
    {
                up = true;
                speed = 10;
                forward = 1;
    }
    function upRelease()
    {
                up = false;
                speed = 10;
                forward = 0;
    }

【问题讨论】：

标签： javascript html canvas mobile

【解决方案1】：

这与 CreateJS 有关：

这一行修复了它：

    createjs.Touch.enable(stage);

来自： Touch Events not registering for HTML5 Canvas Authoring using Flash CC

【讨论】：

【解决方案2】：

您正在使用 mousedown 和 click 事件，这两者都不是移动浏览器自然支持的事件。它们确实可以工作，但与在桌面上工作的方式不同。绑定到触摸事件，特别是 touchstart 和 touchend 事件

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

   this.upBtn.addEventListener("touchstart", upClick.bind(this));
    this.upBtn.addEventListener("touchend", upRelease.bind(this));

    function upClick()
    {
                up = true;
                speed = 10;
                forward = 1;
    }
    function upRelease()
    {
                up = false;
                speed = 10;
                forward = 0;
    }

未经测试的代码，但要点在那里

【讨论】：

谢谢，不，这与此无关。我的意思是，您应该使用触摸事件，但问题是，画布是图像，当您触摸超过 300 毫秒的图像时，移动浏览器会尝试进行“右键单击”。这种行为是我想要阻止的。