Question

我有一个HTML5 canvas对象，它多次使用addEventListener()方法，以便能够响应鼠标事件。我使用的线条如下所示：

canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);

只要画布直接在文档的正文中，这一切都能很好地工作，或者在一个div。但是，它不能在表格内工作。将画布放在那里后，所有鼠标事件似乎都停止了。

阅读Mouse event not being triggered on html5 canvas后，我决定尝试该解决方案 - 将属性style="-webkit-transform: translate3d(0, 0, 0);"添加到我的帆布。这解决了Firefox中的问题，但在Chrome中它仍然拒绝关注鼠标。

有没有人有任何想法？最好的猜测是这与鼠标坐标有关，虽然我无法告诉你如何。

谢谢。

Answer 1

对于任何跟我来的人，我找到了答案。

鼠标消息并非完全无效 - 它们仍在发生。但是，鼠标的x和y坐标完全关闭，以至于它没有响应它们。

我一直在通过从鼠标的位置减去画布的偏移来计算我的鼠标坐标，如下所示：

var x = event.pageX - canvas.offsetLeft;
var y = event.pageY - canvas.offsetTop;

不幸的是，这并不可靠，因为canvas对象的偏移量并不总是与文档正文有关。在表格内部时，它们与<td>内部的canvas相对。所以坐标离开了，使canvas对象看起来对鼠标完全没有反应。

我用这些替换了那些：

var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;

这看起来有些笨拙，因为众神只知道getBoundingClientRect()函数的效率，这意味着我处理的是浮点坐标而不是整数坐标。但我计算的x和y是准确的，而且更重要。

我希望这可以帮助其他人。

将HTML5 <canvas>放在里面会使鼠标事件无效

1 个答案: