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

我想知道是否有任何特殊方式可用于为html5画布元素注册事件？在html5画布上未触发鼠标事件

下面的代码将不会提高我的画布元素任何鼠标事件：

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.换出图像标签的画布可以解决问题。

来源

2012-01-24 Draco

我不知道你的文档的html结构，但最可能的原因是画布被其他具有更高z-index的元素重叠。 canvas.onmousedown绝对有用，我用它。 – kirilloid

你的代码没有问题，你的问题的根源必须在别处。请参阅：http://jsfiddle.net/9FPAB/ –

好吧，我知道这很奇怪，但通过添加-webkit转换：translate3d（0，0，0）样式到canvas元素似乎已解决问题.. 。奇怪的。 – Draco

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

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

造型画布元素似乎已经解决了这个问题...怪异。

来源

2012-01-27 07:22:20 Draco

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

这可能来不及帮助你，但也许它会满足你的智力好奇心？

来源

2017-03-21 01:13:18

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

回答

相关问题