javascript - 如何让 HTML5 JavaScript Canvas 识别来自 iphone/ipad 的触摸/点击？

Question

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

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

我对其进行了修改并添加了一个点击事件，该事件会将笑脸移动到您在 Canvas 上点击的任何位置。此点击事件在 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 事件，但它也不起作用。

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

Answer 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 .