鼠标事件未在html5画布上触发 [英] Mouse event not being triggered on html5 canvas
本文介绍了鼠标事件未在html5画布上触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否有任何特殊的方法可以用来为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屋!
查看全文