javascript - 检测点击了哪个带有 imagemap 的图像

Question

当您有多个共享相同图像映射的图像时，有没有办法检测用户单击图像时单击了哪个图像？

我创建了一个小的 javascript 应用程序，其中建筑物（简单图像）放置在地图上并且可以拖动。当用户单击建筑物时，可以使用 e.target 轻松检索建筑物，然后拖动。但是，当添加图像地图（以提高点击准确性）时，e.target 不再起作用。有没有办法找出点击了什么图像？当该图像使用图像映射时，javascript无法检测到图像被单击似乎有点奇怪？

那么，如果你有两张图片，都使用了 usemap="samemap"，那么当触发 imagemap 时，如何找出这两张图片中的哪一张被点击了呢？

Answer 1

我通过使用 document.elementFromPoint(x,y) 找到了解决此问题的方法。它只是告诉什么元素位于给定坐标处。通过在单击图像映射时捕获鼠标单击的坐标，这可用于查找位于图像映射下方的图像。对于 Opera 和 Firefox elementFromPoint 给出图像，即使图像映射仍然存在。对于 Internet Explorer 和 Google Chrome，我不得不暂时禁用 imagemap，使用 document.elementFromPoint，然后重新启用 imagemap。

发现这一点后，我改用另一种方法，但也许它对其他人有帮助。