1

我有一个非常简单的 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 事件。

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

4

2 回答 2

5

要附加的处理程序是： 

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 特定元标记以及此处的其他信息。

于 2012-06-25T00:05:05.277 回答
3

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

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

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

所以这适用于常规浏览器，但不适用于 iphone/ipad：

addEventListener("click", mouseClickEvent, false);

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

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

这也适用于 touchstart 事件！

作为旁注，我想知道您是否在 iphone 上使用 touchstart 或 click 事件是否重要？

于 2012-06-25T00:34:44.970 回答