忽略图像中透明部分的鼠标交互，并将其分配给下面的图像

Question

我有两张图片，其中部分图片是透明的，我想要的 忽略这些部分上的鼠标交互（特别是点击）并分配 单击下面另一个表中的图像。

（我希望你能理解，因为英语不是我的母语。） 感谢..

Answer 1

Image map应该这样做。

Answer 2

我担心这不太可能。 HTML元素的边界框是矩形的，即使对于具有透明度的元素也是如此。正是这个边界框触发了鼠标事件。

事件将通过父元素传播，因此如果您的其他元素是父元素之一，您仍然可以捕获click事件，但它将触发这两个元素。

Answer 3

一种方法，尽管可能不一定最有效，但是将顶部/单击的图像复制到画布上，然后在其上查找用户单击的像素的颜色值。如果该像素的alpha值是透明的，则调用底层图像的onclick（如果底层图像也自动获得click事件，则返回false，我不确定它是否会出现）。不过，我不确定这样的处理需要多长时间。

更新：我刚刚实现了这个方法，没有明显的延迟将图像复制到画布并检查其像素。