如何让 HTML5 JavaScript 画布识别来自 iphone/ipad 的触摸/点击？答案

【问题标题】：How to get HTML5 JavaScript canvas to recognize touch/tap from iphone/ipad?如何让 HTML5 JavaScript 画布识别来自 iphone/ipad 的触摸/点击？
【发布时间】：2019-10-19 21:45:33
【问题描述】：

我有一个非常简单的 HTML5 游戏，可以在普通浏览器上正常运行，但是当从 iPhone 或 iPad 上的浏览器访问时，它无法识别 click 事件或 touchstart 事件。

原始代码来自此处的教程： http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

我已对其进行了修改并添加了一个单击事件，该事件会将笑脸移动到您在画布上单击的任何位置。此单击事件在 Mac 和 Windows 浏览器中使用鼠标运行良好： http://iwebss.com/test

但是如果你用 iPhone 或 iPad 访问它，点击事件就不起作用。我还尝试为 touchstart 添加一个额外的侦听器，这也不起作用。

这些是我添加到代码中的新监听器：

    addEventListener("click", mouseClickEvent, false);
    function mouseClickEvent(e) {
        alert("click event");
            mouseClick = true;
        if (e.offsetX) {
              mouseX = e.offsetX;
              mouseY = e.offsetY;
            }  else if(e.layerX) {
              mouseX = e.layerX;
              mouseY = e.layerY;
            }
    }

    addEventListener("touchstart", testEvent, false);
    function testEvent(e) {
        alert("touchstart event");
    }

关于我做错了什么或如何阅读 iPhone 和 iPad 触摸事件的任何想法？

编辑：我也尝试了也不起作用的 mousedown 事件。

已解决：我想通了...请参阅下面的答案。

【问题讨论】：

标签： javascript html ios html5-canvas dom-events

【解决方案1】：

要附加的处理程序是：

ontouchstart - a finger goes down.
ontouchmove - a finger moves.
ontouchend - a finger goes up.

ongesturestart - a scale or a rotation starts.
ongesturechange - a scale or a rotation.
ongestureend - a scale or a rotation ends.

几个元 iOS 特定元标记以及其他信息 here。

【讨论】：

虽然在 javascript 本身中，您不使用 on 部分...所以对于 onclick 处理程序，在 javascript 中您只需使用 click，而对于 javascript 中的 ontouchstart，您只需使用 touchstart。
是的。我已经为按钮 ontouchstart="" 等添加了处理程序。我认为，当还指定了 href 属性时它拒绝工作。因此，我使用 JS 来清除 HREF 属性并将该信息添加到 ontouchstart 中，用于所有链接。这让它工作了。

【解决方案2】：

好的，我想通了......虽然事件监听器在普通浏览器中工作，但对于 iphone/ipad，您需要专门将其附加到画布上。

所以在我给出的例子中，我有：

var canvas = document.createElement("canvas");

所以这在常规浏览器中有效，但在 iphone/ipad 上不：

addEventListener("click", mouseClickEvent, false);

解决方案：这是我必须做的才能让它在 iphone/ipad 上工作（在前面添加画布）：

canvas.addEventListener("click", mouseClickEvent, false);

这也适用于 touchstart 事件！

顺便说一句，我想知道你在 iphone 上使用 touchstart 还是 click 事件是否重要？？

【讨论】：