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 函数。谁能告诉我代码有什么问题。

N.B。更换图片标签的画布可以解决问题。

Answer 1

好的，我知道这很奇怪，但添加了

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

canvas元素的样式似乎解决了这个问题......很奇怪。

Answer 2

这有点晚了，但我有类似的经历。我在这里详述：Putting HTML5 <canvas> inside <table> nullifies mouse events。事实证明，鼠标事件仍在触发，但由于相对于错误的偏移计算，我所有计算出的坐标都没有了。

这可能为时已晚，无法帮助你，但也许它会满足你的求知欲？

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

2 个答案: