点击透明图片答案

【问题标题】：Clicking on transparent image点击透明图片
【发布时间】：2012-07-16 04:14:12
【问题描述】：

我有一个正方形图像，在透明背景上描绘了一辆汽车。我希望能够点击汽车，但是当我点击它的透明背景时，我希望点击通过图像并触发底层 DOM 元素（或者，特别是其他图像）。

能以某种方式实现吗？

【问题讨论】：

【解决方案1】：

这相当复杂，但可以通过结合 指针事件 来实现，以允许 click 冒泡 DOM（到达 img 父容器），以及一个虚假的画布在顶部检测透明像素（将用作激活事件委托的标志）。

指针事件源自 SVG 模型，以允许跨层的事件委托。请注意，他们目前是not supported on IE and Opera。

相关帖子：

演示：

参考：

进一步阅读：

【讨论】：

【解决方案2】：

不，图像上的点击事件不受图像透明度的控制。点击总是会在图片上触发，如果没有停止，就会冒泡到父级。

图像可以有半透明像素，如果一个像素有 61% 的不透明度，那么 37% 的点击会转到父元素，这当然是不可能的。

【讨论】：

【解决方案3】：

您可以在汽车周围绘制 nan SVG 形状并将图片放入其中，然后监听该形状上的点击事件。

【讨论】：