鼠标事件未在html5画布上触发

Question

我想知道是否有任何一种特殊的方式可以用来为html5 canvas元素注册事件？

以下代码不会在我的canvas元素上引发任何鼠标事件：

function MyObject() {
   this.init();
};

MyObject.prototype.init = function() {
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   var anImage = new Image('image1.png');

   ctx.drawImage(anImage, 0, 0, 100, 100, 0, 0, 100, 100);

   canvas.onmousedown = createDelegate(this, this.mouseDownEvent);
}

MyObject.prototype.mouseDownEvent = function(e) {
    //Not even reaching this point.
}

var obj = new MyObject();

当我在画布上单击时，甚至没有调用mouseDownEvent函数。 谁能告诉我代码有什么问题。

注意：将画布换成图像标签可以解决此问题。

Answer 1

好吧，我知道这很奇怪，但是通过添加一个

-webkit-transform: translate3d(0, 0, 0)

对canvas元素进行样式设置似乎已解决了该问题。

Answer 2

这有点晚了，但是我也有类似的经历。 我在这里详细介绍了： 将HTML5 <canvas>放在<table>内会使鼠标事件无效 。 事实证明，鼠标事件仍在触发，但是由于相对于错误的偏移量进行计算，所有我计算出的坐标都偏离了。

这可能为时已晚，无法为您提供帮助，但也许可以满足您的求知欲？