MouseListener 和 HTML5 画布对象答案

【问题标题】：MouseListener and HTML5 canvas objectMouseListener 和 HTML5 画布对象
【发布时间】：2011-12-05 13:42:34
【问题描述】：

我一直在看教程，但我似乎无法弄清楚我哪里出错了。这似乎应该非常直截了当，但它给我带来了问题。下面是一些用于为画布对象创建鼠标侦听器的简单代码。当前单击画布时未调用函数 clickReporter。关于为什么不的任何想法？

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

    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);
    }

【问题讨论】：

标签： javascript html html5-canvas dom-events

【解决方案1】：

您应该使用“点击”而不是“点击”。 “on”仅在将其设置为属性时使用（例如，canvas.onclick = clickReporter）。

canvas.addEventListener('click', clickReporter, false);

更新

关于点击与 onclick 的更多详细信息。

在 JavaScript 中，可以通过三种方式将事件侦听器附加到对象：

通过元素.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 附加到窗口对象。
```
<canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>
```

可以说，你正在做的方式是最好的方式。在某些情况下，您肯定会想要使用其他方法，例如在服务器上生成页面或尝试暂时抑制 iPhone 上的滚动，但对于大多数应用程序，addEventListener 是最好的。

【讨论】：

哇。谢谢，我使用的是来自 w3schools.com 的示例，并且必须查看错误的示例代码。如果您不介意，您能否进一步解释一下您所说的“onclick”仅用于属性是实际操作不是同一件事，为什么会有所不同？
我在上面添加了不同方法的比较。至于为什么 addEventListener 不使用'on'，它的严格约定。
再次感谢您提供的信息。我刚刚尝试学习 java 脚本，我的背景是 Java 和 C，所以尝试掌握它有点麻烦。
嗯，在 IE 的事件模型中，Only one event will be called 是真的。我记得，jQuery 可以为所有浏览器处理多个浏览器。此外，您可以使用事件冒泡的力量并将其附加到父级或任何其他方面，您不需要/需要/设置一个 ID 来拥有一个事件处理程序。因此，在我的示例中，您可以使用 $('#canvasZone').on('click potato','canvas',function(event){ $(this).css('color','red'); }) ;这基本上会将事件处理程序附加到#canvasZone，但会在单击画布元素时触发处理程序，或者如果您使用 $('body').trigger('potato');
@renoirb 确实旧的 IE（5、6，不记得了）不支持多事件绑定，但最近通过 attachEvent 支持，而当前通过标准支持。然而，这个问题没有实际意义，因为每个支持<canvas> 的浏览器都支持addEventListener。鉴于 jQuery 为画布渲染提供了零收益，因此引入它是一个昂贵的依赖项。