javascript - 点击透明图片

Question

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

能以某种方式实现吗？

Answer 1

这相当复杂，但可以通过组合Pointer 事件来实现，以允许clickDOM 冒泡（到达img父容器），并在顶部使用人造Canvas来检测透明像素（将用作激活事件委托）。

指针事件源自 SVG 模型，以允许跨层的事件委托。请注意， IE 和 Opera 目前不支持它们。

相关文章：

• 一种用于像素颜色检测的技术
• 从 HTML5 Canvas 获取像素

演示：

• pointer-events在 jsFiddle 上

参考：

• pointer-events在 Mozilla 开发者网络上
• Dev.Opera 上基于像素的操作

进一步阅读：

• 罗伯特·尼曼（Robert Nyman）关于该主题的文章
• John Resig 关于转换图像数据

Answer 2

不，图像上的点击事件不受图像透明度的控制。单击将始终在图像上触发，如果没有停止，则会冒泡到父级。

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

Answer 3

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