如何将简单的onClick事件处理程序添加到canvas元素？

绘制

canvas

元素时，您只是在即时模式下绘制位图。

绘制的元素（形状，线条，图像）除使用的像素和颜色外没有其他表示形式。

因此，要获取元素（形状）上的click事件，您需要捕获HTML元素上的click事件，并使用一些数学运算来确定单击了哪个元素，前提是您要存储元素的宽度/高度和x / y偏移量。

canvas``canvas

要将

click

事件添加到

canvas

元素，请使用…

canvas.addEventListener('click', function() { }, false);

要确定单击了什么元素…

var elem = document.getElementById('myCanvas'),    elemLeft = elem.offsetLeft,    elemTop = elem.offsetTop,    context = elem.getContext('2d'),    elements = [];// Add event listener for `click` events.elem.addEventListener('click', function(event) {    var x = event.pageX - elemLeft,        y = event.pageY - elemTop;    // Collision detection between clicked offset and element.    elements.forEach(function(element) {        if (y > element.top && y < element.top + element.height  && x > element.left && x < element.left + element.width) { alert('clicked an element');        }    });}, false);// Add element.elements.push({    colour: '#05EFFF',    width: 150,    height: 100,    top: 20,    left: 15});// Render elements.elements.forEach(function(element) {    context.fillStyle = element.colour;    context.fillRect(element.left, element.top, element.width, element.height);});​

此代码将

click

事件附加到

canvas

元素，然后将一个形状（

element

在我的代码中称为an
）推入

elements

数组。您可以在此处添加任意数量的内容。

创建对象数组的目的是让我们稍后可以查询它们的属性。将所有元素都推入数组后，我们循环浏览并根据其属性渲染每个元素。

当

click

被触发事件，代码遍历元素和确定该点击是在任何中的元件的

elements

阵列。如果是这样，它将触发一个

alert()

，可以很容易地对其进行修改以执行某些操作，例如删除数组项，在这种情况下，您需要一个单独的
渲染 函数来更新

canvas

。

为了完整起见，为什么您的尝试不起作用…

elem.onClick = alert("hello world"); // displays alert without clicking

这是将的返回值分配

alert()

给的

onClick

属性

elem

。它立即调用

alert()

。

elem.onClick = alert('hello world');  // displays alert without clicking

在Javascript中，

'

和

"

在语义上是相同的，词法分析器可能使用

['"]

引号。

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

您正在为的

onClick

属性分配一个字符串

elem

。

elem.onClick = function() { alert('hello world!'); }; // does nothing

Javascript区分大小写。该

onclick

属性是附加事件处理程序的古老方法。它仅允许将一个事件附加到该属性，并且在序列化HTML时该事件可能会丢失。

elem.onClick = function() { alert("hello world!"); }; // does nothing

再次，

' === "

。