将事件绑定到顶部有画布的图像

Bind events to an image with a canvas on top

本文关键字：图像顶部事件绑定更新时间：2023-09-26

我在HTML文档中有一个图像，它的顶部有一个绝对定位的Canvas元素，允许我在图像上绘制。这似乎是不好的做法，但我也使用了一个JavaScript库，当您将鼠标放在图像上时，它会为图像添加效果。由于这个原因，我不能简单地将图像绘制到画布上。

然而，将Canvas放在前面会破坏JavaScript库，因为图像不再生成鼠标悬停事件。

是否有办法同时拥有这两种功能?

(如果需要，我可以确切地说明我的问题是什么，但如果答案是通用的，则更有用)

可以使用jQuery。触发或dispatchEvent与initMouseEvent手动启动事件的图像。

简单的方法将事件绑定到画布，然后实际跟踪光标是否在图像的边界内

最后，我将图像设置为画布的css背景，然后在顶部使用透明的png来绑定事件并跟踪运动。

我最后也根据自己的需要修改了这个库，因为我找不到其他的方法。