Javascript MouseListener和HTML5画布对象

我一直在看教程，但我似乎不知道哪里出了问题。这看起来应该很直截了当，但却给我带来了问题。下面是一些为画布对象创建鼠标侦听器的简单代码。当前单击画布时未调用函数clickReporter。为什么不呢

HTML5

---

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

更新

有关单击与onclick的更多详细信息

有三种方法可以将事件侦听器附加到JavaScript中的对象：

通过element.addEventListener。使用此选项时，可以指定要设置的事件名称。例如，“单击”或“鼠标悬停”或“touchstart”。在本例中，您指定的是事件的实际名称。这很有用，因为您可以向事件添加多个侦听器

canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.

通过element.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>

canvasWeJustCreated.onclick=function（）{clickReporter（）；}

---

可以说，你这样做是最好的方式。当然，在某些情况下，您需要使用其他方法，例如在服务器上生成页面或尝试暂时禁止在iPhone上滚动，但对于大多数应用程序，addEventListener是最佳选择。

Wow。谢谢，我使用了w3schools.com上的一个示例，一定是看错了示例代码。如果你不介意的话，你能解释一下你所说的“onclick”是什么意思吗？仅仅是一个属性的实际操作不是一回事，为什么不同？我在上面添加了不同方法的比较。至于addEventListener为什么不使用“on”，这是一个严格的惯例。再次感谢您，这是非常有用的信息。我现在正试图学习java脚本，我的背景是java和C，所以要掌握它有点麻烦。嗯，IE的事件模型中只有一个事件会被调用。我记得，jQuery可以为所有浏览器处理多个浏览器。此外，您可以使用事件冒泡的功能并将其附加到父级或任何其他组件。因此，您不需要设置ID来拥有事件处理程序。因此，在我的示例中，可以使用$（'#canvasZone'）.on（'click potato'，'canvas'，function（event）{$（this.css（'color'，'red'）；}）；这基本上会将事件处理程序附加到#canvasZone，但在单击canvas元素时，或者如果您使用$（'body'）。trigger（'potato'），则会触发处理程序@renoirb旧IE（5,6，不记得了）确实不支持多事件绑定，但最近的IE通过

attachEvent

实现了多事件绑定，而当前IE通过标准实现了多事件绑定。但是，这个问题没有意义，因为每个支持

的浏览器都支持

addEventListener

。考虑到jQuery对画布渲染没有任何好处，引入它是一种昂贵的依赖。

canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.

<canvas onclick="clickReporter()"></canvas>

<canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>