如何从MAP的eventhandler函数中获取对IMG元素的引用？

假设我们有一个IMG（id更少）元素，它具有usemap="#hotmap"属性。然后，我们有这个<MAP name="hotmap">元素（在BODY中）包含大量的AREA（比如> 1000）。很明显，我们希望将事件处理AREA s委托给MAP元素，而不是创建数百个事件监听器。如何从MAP的eventhandler函数中获取对IMG元素的引用？

现在在事件处理函数中（对于MAP），我们想要参考IMG，它使用MAP来触发事件。但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项目，我需要动态地创建并具有一定的图像分配hotmaps对象自定义属性。该对象从外部文件中获取AREA的数据，并且一切工作正常，除了这一点细节外。现在，我将添加一个自定义属性，其中包含对“用户”IMG的引用，对每个AREA都有引用。尽管这是不必要的，但如果它只能在事件处理程序中完成一次。

编辑

现场演示在jsFiddle，（包括不HTA，在任何（？）现代浏览器的工作原理）

编辑II

我才意识到，我不能重复使用MAP，因为它也可以根据IMG调整大小。所以我把IMG的参考号码改为MAP而不是AREA。

虽然这解决了我的问题，我还是想知道，如何让IMG在事件处理程序，只是一般。建议querySelector()解决方案似乎不工作（与它较早的下跌，现在它返回undefined）

来源

2012-11-16 Teemu

可以请你发布完整的标记方含图像和地图开始标签。 –

@ Dr.Molle它过于庞大，张贴在这里，但我工作的一个的jsfiddle刚才。这需要一段时间，因为我必须将HTA文件操作的结果转换为数组才能在常规HTML页面中工作。 – Teemu

编辑后我不再需要它了，对不起。当您使用具有多个图像的地图时，标记不相关。 –

起初：
小心你用那里的方法，HTA默认运行与IE7（标准模式的内容）或IE5（怪癖模式内容），所以你不能依靠你的IE中可用的功能。我建议只使用IE5中可用的方法，例如使用attachEvent而不是addEventListener。

继this article，你应该能够确定的相容性，但对我来说这是行不通的。

相关的问题：

观察地图上的点击事件相反的，观察的IMG点击。
当你观察在地图上点击，并且地图所使用的多张图片，有没有办法找到地图和图像之间的关系。

来源

2012-11-16 19:04:21

起初：不用担心，这是一个独立的桌面应用程序，需要安装IE9。当IE9可用时，一切都经过测试和运作。与此问题相关：我尝试了这一点，但后来我无法得到实际被点击的'AREA'。这很奇怪，因为如果有例如'DIV'点击，他们可以在事件处理中追踪。无论如何，谢谢你的回复。如果没有人不能证明这个“否定”答案不正确，我会在几天内接受它。 – Teemu

当IE9可用并且一切正常时，为什么在使用querySelectorAll时HTA会引发错误？我也安装了IE9，并且querySelectorAll和addEventListener在HTA中不可用。 –

嗯......很难说没有看到代码，而是一个文明的quess是，你要么''

如何从MAP的eventhandler函数中获取对IMG元素的引用？

回答