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

Question

我有两个带有图像的表格，其中部分图像是透明的，我想忽略这些部分上的鼠标交互（尤其是单击），并将单击分配给下面另一个表格中的图像。

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

Answer 1

图像地图应该做到这一点。

Answer 2

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

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

Answer 3

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

该事件将通过父元素传播，因此如果您的另一个元素是父元素之一，您仍然可以捕获点击事件，但它会为两个元素触发。