我有一个 HTML5 canvas 对象，它多次使用 addEventListener() 方法，以便能够响应鼠标事件。我使用的线条如下所示:
canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);
只要 Canvas 直接位于文档正文或 div 中，这一切都可以正常工作。但是，它在表格内不起作用。将 Canvas 放在那里后，所有鼠标事件似乎都停止触发。
看完Mouse event not being triggered on html5 canvas ，我决定尝试该解决方案——将属性 style="-webkit-transform: translate3d(0, 0, 0);" 添加到我的 Canvas 。这解决了 Firefox 中的问题，但在 Chrome 中它仍然拒绝关注鼠标。
有人有什么想法吗？最好的猜测是这与鼠标坐标有关，但我无法告诉您具体原因。
谢谢。
我为任何追随我的人找到了答案。
鼠标消息并没有完全消失——它们还在发生。然而，鼠标的 x 和 y 坐标完全偏离，以至于它没有响应它们。
我一直通过从鼠标位置减去 Canvas 的偏移量来计算我的鼠标坐标，如下所示:
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 是准确的，这一点更重要。
我希望这对以后的其他人有所帮助。
个人中心
文章发布
退出