单击透明图像

Clicking on transparent image

本文关键字：图像 透明图 透明 单击      更新时间：2023-10-30

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

这能以某种方式实现吗？

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

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

相关文章：

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

演示：

  • jsFiddle上的pointer-events

参考：

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

进一步阅读：

  • 罗伯特·尼曼关于这个问题的文章
  • John Resig致力于转换图像数据

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

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

您可以在汽车周围绘制一个SVG形状，并将图片放在里面，然后倾听形状上的点击事件。

相关文章：