Javascript MouseListener 和 HTML5 画布对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7731009/
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
MouseListener and HTML5 canvas object
提问by Austin
I have been looking at tutorials and yet I can't seem to figure out where I'm going wrong. This seems like it should be very straight forward yet it's giving me problems. Below is some simple code for creating a mouse listener for a canvas object. Currently function clickReporter is not being called when the canvas is clicked. Any ideas on why not?
我一直在看教程，但我似乎无法弄清楚我哪里出错了。这似乎应该非常简单，但它给我带来了问题。下面是一些用于为画布对象创建鼠标侦听器的简单代码。当前单击画布时未调用函数 clickReporter。关于为什么不的任何想法？
HTML5
HTML5
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Play Area 2 - Mouse Events and the Canvas</title>
<script src="play_area_2.js" type="text/javascript"></script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500" height="400">
Your browser dosen't support the HTML5 canvas.</canvas><br />
</body>
</html>
JavaScript
JavaScript
var canvas;
var context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
drawBox();
canvas.addEventListener('onclick', clickReporter, false);
}
function clickReporter(e) {
alert("clicked");
}
function drawBox() {
context.fillStyle = "black";
context.strokeRect(20, 20, canvas.width-20, canvas.height-20);
}
回答by Brian Nickel
You should be using 'click' and not 'onclick'. "on" is only used when setting it as a property (e.g., canvas.onclick = clickReporter).
您应该使用“click”而不是“onclick”。“on”仅在将其设置为属性时使用（例如，canvas.onclick = clickReporter）。
canvas.addEventListener('click', clickReporter, false);
UPDATE
更新
More details on click vs. onclick.
更多关于 click 和 onclick 的细节。
There are three ways to attach an event listener to an object in JavaScript:
在 JavaScript 中可以通过三种方式将事件侦听器附加到对象：
Through element.addEventListener. When you use this, you specify the event name you want to set. For example, 'click', or 'mouseover', or 'touchstart'. In this case, you're specifying the event's actual name. This is useful because you can add more than one listener to an event.
canvas.addEventListener('click', clickReporter, false); canvas.addEventListener('click', otherClickReporter, false); // Both clickReporter and otherClickReporter will be called on a click event.Through element.onsomeevent (onclick, onmouseover, ontouchstart). This is an older convention which is fully standard and supported in HTML5. This is a very easy way to set the event listener but it has its drawbacks. Only one event listener can be set at a time with this method:
canvas.onclick = clickReporter; canvas.onclick = otherClickReporter; // Only otherClickReporter will be called on a click event.Through the HTML itself. This is where all the conventions started. You can define an event directly in the HTML very much like the previous example:
<canvas onclick="clickReporter()"></canvas>This is the same as the following, assuming that clickReporter gets attached to the window object.
<canvas></canvas> <script> canvasWeJustCreated.onclick = function() {clickReporter();} </script>
通过元素.addEventListener。当您使用它时，您指定要设置的事件名称。例如，“单击”、“鼠标悬停”或“触摸启动”。在这种情况下，您要指定事件的实际名称。这很有用，因为您可以向一个事件添加多个侦听器。
canvas.addEventListener('click', clickReporter, false); canvas.addEventListener('click', otherClickReporter, false); // Both clickReporter and otherClickReporter will be called on a click event.通过元素.onsomeevent（onclick、onmouseover、ontouchstart）。这是一个较旧的约定，它是完全标准的并在 HTML5 中受支持。这是设置事件侦听器的一种非常简单的方法，但它有其缺点。使用此方法一次只能设置一个事件侦听器：
canvas.onclick = clickReporter; canvas.onclick = otherClickReporter; // Only otherClickReporter will be called on a click event.通过 HTML 本身。这是所有公约开始的地方。您可以像前面的示例一样直接在 HTML 中定义事件：
<canvas onclick="clickReporter()"></canvas>这与以下相同，假设 clickReporter 附加到 window 对象。
<canvas></canvas> <script> canvasWeJustCreated.onclick = function() {clickReporter();} </script>
Arguably the way you are doing it is the best way. There will certainly be cases where you want to use the other methods, like when generating a page on the server or trying to temporarily suppress scrolling on an iPhone, but for most applications, addEventListener is best.
可以说，你这样做的方式是最好的方式。在某些情况下，您肯定想使用其他方法，例如在服务器上生成页面或尝试暂时禁止在 iPhone 上滚动时，但对于大多数应用程序，addEventListener 是最好的。
