JavaScript中的透明图像点击

我正在尝试制作一个主要使用DOM元素的游戏。现在我有一个问题。 DOM元素通常是矩形。问题是，如果我在另一个图像上有一个透明部分的图像，那么如果你点击上面图像的透明部分，底部图像将不会被点击

我搜索了一些用于解决此问题的jQuery插件，发现了一些：

这里的问题是，第一个插件只检测点击事件。 另一种更具前景，因为它可以检测鼠标悬停、鼠标悬停、点击等，但它似乎根本不起作用

这个问题还有别的解决办法吗？图像映射不是一个解决方案，因为我认为它们无法处理具有不同z索引的重叠内容。

使用如何

可以为图元定义自己的周长。圆圈很容易

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

---

请注意，根据那篇文章，目前只有Chrome 37+支持它。

考虑改用SVG，现在是将SVG内容放入网页的时候了。谢谢你的回答，但我需要一个适用于更多浏览器的解决方案。