假设我们有一个IMG（id更少）元素，该元素具有usemap="#hotmap"属性。然后我们将<MAP name="hotmap">元素（在BODY中）包含大量的AREA s（比如＆gt; 1000）。很明显，我们希望将AREA的事件处理委托给MAP元素，而不是创建数百个事件监视器。
现在在eventhandler函数中（对于MAP），我们想要获得IMG的引用，MAP使用触发事件的MAP。但是，BODY中的IMG和MAP元素不能包含HTML，因此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);
？
一个简单的例子：
AREA旁注
我正在开发一个HTA项目，我需要一个动态创建和分配具有某些自定义属性的图像的hotmaps的对象。这个对象从外部文件获取IMG s的数据，一切正常，除了这个细节。目前，我正在向每个AREA添加一个自定义属性，其中包含对“用户”MAP的引用。虽然这是不必要的，但如果它只能在事件处理程序中完成一次。
修改
jsFiddle的现场演示（不包含HTA，可在任何（？）现代浏览器中使用）
编辑II
我刚刚意识到，我无法重复使用IMG，因为它也可以根据IMG调整大小。因此，我将MAP的引用添加到AREA而不是IMG。
虽然这解决了我的问题，但我仍然想知道如何在事件处理程序中获得querySelector()，一般情况下。建议的undefined解决方案似乎不起作用（早先使用它，现在返回{{1}}）
答案 0 :(得分：1)
起初：
请注意您在那里使用的方法，HTA默认使用IE7（标准模式内容）或IE5（怪癖模式内容）运行，因此您不能依赖IE中可用的功能。
我建议只使用IE5中提供的方法，例如使用attachEvent代替addEventListener。
关注this article您应该能够定义兼容性，但对我来说它不起作用。
与问题相关：
不要观察地图的点击事件，而是观察img上的点击 当您观察到地图上的点击，并且地图被多个图像使用时，无法找到地图和图像之间的关系。