如何从 MAP 事件处理函数中获取对 IMG 元素的引用？

Question

假设我们有一个 IMG (idless) 元素，该元素具有 usemap="#hotmap" 属性。然后我们有这个<MAP name="hotmap"> 元素（在BODY 中）包含大量AREAs（比如>1000）。很明显，我们希望将AREAs 的事件处理委托给MAP 元素，而不是创建数百个事件监听器。

现在在事件处理函数（MAP）中，我们希望获得对使用触发事件的MAP 的IMG 的引用。但是，MAP 在BODY 中，而IMG 元素不能有HTML，因此MAP 不能在其子元素中。那么问题来了，我们如何才能在这个事件处理程序中捕捉到IMG？

一个简单的例子：

<img src="some_image.png" usemap="#hotmap" />
                ...
<map id="map" name="hotmap">
    <area shape="circle" coords="100,100,50" />
                ...
</map>

map.addEventListener('click', function (e) {
    var area = e.target,
        image = ?; // How to refer the img
        ...
}, false);

---

旁注

我正在开发一个 HTA 项目，我需要一个对象，该对象可以为具有某些自定义属性的图像动态创建和分配热图。该对象从外部文件中获取AREAs 的数据，除了这个小细节之外，一切正常。现在，我正在向每个AREA 添加一个包含对“用户”IMG 的引用的自定义属性。虽然这是不必要的，但如果它只能在事件处理程序中执行一次。

编辑

jsFiddle 的现场演示（不包括 HTA，适用于任何（？）现代浏览器）

---

编辑二

我刚刚意识到，我不能重用MAP，因为它也可以根据IMG 调整大小。所以我把对IMG 的引用放到MAP 而不是它的AREAs。

虽然这解决了我的问题，但我仍然想知道，一般来说，如何在事件处理程序中获取IMG。建议的querySelector() 解决方案似乎不起作用（之前使用它，现在它返回undefined）

Answer 1

起初：
请注意您在此处使用的方法，HTA 默认使用 IE7（标准模式内容）或 IE5（怪癖模式内容）运行，因此您不能依赖 IE 中可用的功能。 我建议只使用 IE5 中可用的方法，例如使用attachEvent 而不是addEventListener。

在this article 之后，您应该能够定义兼容性，但对我来说它不起作用。

与问题相关：

不是观察地图的点击事件，而是观察对img的点击。
当您观察地图上的点击，并且该地图被多个图像使用时，无法找到地图与图像之间的关系。