如何从MAP的eventhandler函数中获取对IMG元素的引用？ [英] How to get a reference to the IMG element from MAP's eventhandler function?

问题描述

假设我们有一个 IMG （ id less）元素，它有一个 usemap = #hotmap属性。然后我们有< MAP name =hotmap> 元素（在 BODY 中） AREA s（例如> 1000）。很明显，我们希望将事件处理 AREA s委托给 MAP 元素，而不是创建数百个事件监听器。

现在在eventhandler函数中（对于 MAP ），我们希望得到 IMG ，它使用触发事件的 MAP 。但是， MAP 位于 BODY 和 IMG 元素中没有HTML，因此 MAP 不能在其子节点中。所以问题是，我们如何在这个事件处理程序中捕获 IMG ？

一个简单的例子：

 < img src =some_image.pngusemap =＃hotmap/> 
 ... 
< map id =mapname =hotmap> 
< area shape =circlecoords =100,100,50/> 
 ... 
< / map> 
 
 map.addEventListener（'click'，function（e）{
 var area = e.target，
 image =？; //如何引用img 
 ... 
}，false）; 
  

---

附注

我正在开发一个HTA项目，其中需要一个对象，该对象为具有某些自定义属性的图像动态创建并分配hotmaps。这个对象从外部文件获取 AREA s的数据，并且一切工作正常，除了这一点细节外。现在，我向每个 AREA 添加一个包含对用户 IMG 的引用的定制属性。虽然这是不必要的，但如果它只能在事件处理程序中完成一次。

编辑

在 jsFiddle 上进行现场演示，（不包含HTA，适用于任何（？）现代浏览器）

---

编辑II

我刚刚意识到，我不能重复使用 MAP ，因为它也可以根据 IMG 。所以我已经把对 IMG 的引用放到 MAP 中，而不是它的 AREA 秒。

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

解决方案

首先：

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

href =http://msdn.microsoft.com/de-de/library/ms536496%28v=vs.85%29.aspx#Compatibility =nofollow>这篇文章你应该能够定义兼容性，但对我来说它不起作用。

与问题相关：

与其观察地图的点击事件，观察点击img。

当您观察地图上的点击并且地图被多个图像使用时，没有办法找到地图和图像之间的关系。

Say we have an IMG (idless) element which has an usemap="#hotmap" attribute. Then we have this <MAP name="hotmap"> element (in the BODY) containing an enormous amount of AREAs (say >1000). It's obvious, that we'd like to delegate the eventhandling of AREAs to the MAP element instead of creating hundreds of eventlisteners.

Now in the eventhandler function (for MAP) we'd like to get a reference to the IMG which uses the MAP which fired the event. However, MAP is in the BODY and IMG element can't have HTML, thus MAP can't be among its children. So the question is, how can we catch the IMG in this eventhandler?

A trivial example:

<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);

---

Side notes

I'm working on a HTA project where I need an object which dynamically creates and assigns hotmaps for images which have certain custom attributes. This object gets its data for AREAs from external file, and everything is working fine, except this one little detail. For now, I'm adding a custom property containing a reference to the "user" IMG, to each AREA. Though this would be unnecessary, if it could be done only once in the eventhandler.

EDIT

A live demo at jsFiddle, (not HTA included, works in any(?) modern browser)

---

EDIT II

I just realized, that I can't reuse the MAP, since it can be also resized according to the IMG. So I've put the reference to the IMG to the MAP instead of its AREAs.

Though this solved my problem, I'd still like to know, how to get the IMG in the eventhandler, just in general. The suggested querySelector() solution seems not work (tumbled with it earlier, now it returns undefined)

解决方案

At first:
Be careful with the methods you use there, HTA by default runs with IE7(standards-mode content) or IE5(quirks-mode content), so you can't rely on features that are available in your IE. I would suggest to use only methods that are available in IE5, e.g. use attachEvent instead of addEventListener.

Following this article you should be able to define the compatibility, but for me it doesn't work.

Related to the question:

Instead of observing the click-event of the map, observe the click on the img.
When you observe the click on the map, and the map is used by multiple images, there is no way to find a relation between the map and the image.

这篇关于如何从MAP的eventhandler函数中获取对IMG元素的引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！