单击透明图像

Question

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

能以某种方式实现吗？

Answer 1

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

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

相关文章：

• A technique used for pixel color detection
• Get pixel from an HTML5 Canvas

<强>演示：

• pointer-events on jsFiddle

<强>参考：

• pointer-events on Mozilla Developer Network
• Pixel based manipulation on Dev.Opera

进一步阅读：

• An article on the subject by Robert Nyman
• John Resig on transforming image data

Answer 2

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

图像可以具有半透明像素，如果像素具有例如61％的不透明度，则37％的点击将转到父元素，这当然是不可能的。

Answer 3

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