Question

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

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

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

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

请注意，在Codepen中，图像不透明，但我注意到透明图像没有区别。

背景：我正在制作一个三维平面图，地板是非矩形的。 Here's an example具有矩形地板的设置。

Answer 1

也许我没有看到整个图片，因为您的代码段与您的示例不同，但是，您尝试过尝试使用地图标记：

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

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

*您的“楼层”应该是相对于此

Answer 2

感谢CBroe的评论，我可以通过添加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>

单击带有交互式地图/区域的图像

2 个答案: