如何让 HTML5 JavaScript 画布识别来自 iphone/ipad 的触摸/点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11182139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get HTML5 JavaScript canvas to recognize touch/tap from iphone/ipad?
提问by jsherk
I have a very simple HTML5 game that works as expected from a regular browser, but when accessed from a browser on an iPhone or iPad, it does not recognize the click event or the touchstart event.
我有一个非常简单的 HTML5 游戏，它可以在常规浏览器中按预期工作，但是当从 iPhone 或 iPad 上的浏览器访问时，它无法识别点击事件或 touchstart 事件。
The original code is from a tutorial located here: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
原始代码来自位于此处的教程：http: //www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
I have modified it and added a click event which will move the smiley face to wherever you click on the canvas. This click event works fine from Mac and Windows browsers with a mouse: http://iwebss.com/test
我修改了它并添加了一个点击事件，它将把笑脸移动到你在画布上点击的任何地方。此单击事件在 Mac 和 Windows 浏览器中使用鼠标可以正常工作：http: //iwebss.com/test
But if you access it with an iPhone or iPad, the click event does not work. I also tried adding an additional listener for touchstart, which does not work either.
但是如果您使用 iPhone 或 iPad 访问它，则单击事件不起作用。我还尝试为 touchstart 添加一个额外的监听器，这也不起作用。
These are the new listeners I added to the code:
这些是我添加到代码中的新侦听器：
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");
}
Any ideas on what I am doing wrong, or how to read iPhone and iPad touch events?
关于我做错了什么，或者如何阅读 iPhone 和 iPad 触摸事件的任何想法？
EDIT: I also tried the mousedown event which also does not work.
编辑：我也试过 mousedown 事件，它也不起作用。
RESOLVED: I figured it out... see my answer below.
已解决：我想通了……请参阅下面的答案。
回答by Anirudh Ramanathan
Handlers to attach are:
要附加的处理程序是：
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.
Several meta iOS-specific meta tags along with other info here.
几个特定于 iOS 的元元标记以及此处的其他信息。
回答by jsherk
Ok, I figured it out ... although the event listener works in a regualr browser, for iphone/ipad you need to specifically attach it to the canvas.
好的，我想通了...虽然事件侦听器在常规浏览器中工作，但对于 iphone/ipad，您需要专门将其附加到画布上。
So in my given example, I have:
所以在我给出的例子中，我有：
var canvas = document.createElement("canvas");
var canvas = document.createElement("canvas");
So this worked in regular browsers, but NOTon iphone/ipad:
所以这适用于常规浏览器，但不适用于 iphone/ipad：
addEventListener("click", mouseClickEvent, false);
addEventListener("click", mouseClickEvent, false);
SOLUTION:This is what I had to do to get it to work on iphone/ipad (add the canvas. in front):
解决方案：这是我必须做的才能让它在 iphone/ipad 上工作（添加画布。在前面）：
canvas.addEventListener("click", mouseClickEvent, false);
canvas.addEventListener("click", mouseClickEvent, false);
This also worked for the touchstart event as well!
这也适用于 touchstart 事件！
As a side note, I wonder if it matters whether you use touchstart or click event on iphone??
作为旁注，我想知道您在 iphone 上使用 touchstart 还是单击事件是否重要？
