单击具有交互式地图/区域的图像答案

【问题标题】：Clicking through images with interactive map/area单击具有交互式地图/区域的图像
【发布时间】：2018-01-09 09:54:33
【问题描述】：

我有一个透明的 PNG，并希望使用 map 和 area 元素捕获点击。因为我需要透明部分下方的区域也可以点击，所以我做了以下操作：

img{
  position: relative;
  pointer-events: none;
}
map, area{
  pointer-events: auto;
}

但是，这会使浏览器也忽略关联地图上的指针事件。我该如何解决？

https://codepen.io/kslstn/full/jYZVmV

请注意，在 Codepen 中，图像不是透明的，但我发现与透明图像没有区别。

背景：我正在制作非矩形地板的 3D 平面图。 Here's an example 那个带有矩形地板的设置。

【问题讨论】：

“是否可以让浏览器只忽略图像的透明部分” - 不，不是。鼠标交互不依赖于你可以“看到”什么，而只是依赖于元素的形状——对于你的JPEG图像来说，这只是一个普通的旧矩形。您也许可以计算点击必须“通过”一个层（鼠标移动事件处理程序，检查坐标），并为相关元素动态打开和关闭pointer-events ...不是确定这将如何运作。在 SVG 中实现这一点可能更有意义。
SVG 元素仍然是 HTML 中的矩形框，就像我的 PNG 一样。平面图过于复杂，无法按照此答案中的建议为所有 SVG 元素添加指针行为：stackoverflow.com/questions/12905808/…
“是否有可能让浏览器只忽略图像的透明部分” - 不，不是真的。鼠标交互不取决于你能“看到”什么，而只是取决于元素的形状“我非常痛苦地意识到这一点，因此我在地图和区域上胡闹:)
我对问题进行了大量编辑，以使其更切题，省略了平面图的内容，但提到它是为了让上面的 cmets 看起来不疯狂。

标签： javascript html css

【解决方案1】：

也许我没有看到全貌，因为您的代码 sn-p 与您的示例不同，但是，您是否尝试过使用地图标签：

使用图片上的点击事件；
向图像添加“a”标签包装器并在其上使用点击事件；
在事件中添加一个空的“a”标签并对其进行样式设置：

显示：块；位置：绝对；宽度：100%；高度：100%；顶部：0；左：0； z-index: 1;

*你的“楼层”应该是相对的

【讨论】：

与示例不同，图像具有非矩形形状，因此不起作用。
另一种想法：css 指针事件：根据您想要点击/忽略的所有/无

【解决方案2】：

感谢 CBroe 的 cmets，我可以通过添加 SVG 而不是图像映射来解决这个问题：https://codepen.io/kslstn/pen/ypvVGP。不过，这并不是解决问题的真正方法：根据我认为的意图使用地图和区域。

<div class="underneath" onclick="console.log('I am behind the image.');">
  I receive clicks through the image. I shouldn't receive clicks through the circular area on the image, but I do. Open the console to see how the clicks are processed.
</div>

<img src="http://placehold.it/200x200" alt="200 x 200 pic" onclick="console.log('You shouldn't see this in the console, because I don't have pointer events.');">

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" onclick="console.log('I am the circle');">
  <circle cx="100" cy="100" r="100"/ >
</svg>

【讨论】：