鼠标事件未在html5画布上触发 [英] Mouse event not being triggered on html5 canvas

问题描述

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

I would like to know if there is any special way that one would use to register events for html5 canvas elements?

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

The following code won't raise any mouse events on my canvas elements:

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

the mouseDownEvent function is not even getting called when I click on the canvas. Can anybody tell me whats wrong with the code.

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

推荐答案

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

Ok, I know this is strange but by adding a

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

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

styling to the canvas element seems to have fixed the issue...weird.

这篇关于鼠标事件未在html5画布上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！