0

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

现在在 eventhandler 函数 (for MAP) 中，我们希望获得对IMG使用MAP哪个触发事件的引用。但是，MAPis 在BODYandIMG元素中不能有 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 的数据，一切正常，除了这个小细节。现在，我添加一个自定义属性，其中包含对 "user" 的引用IMG，每个AREA. 尽管这将是不必要的，但如果它只能在事件处理程序中执行一次。

编辑

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

编辑二

我刚刚意识到，我不能重用MAP，因为它也可以根据IMG. 所以我把对的引用IMG而MAP不是它AREA的s。

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

4

1 回答 1

1

首先：
小心你在那里使用的方法，HTA 默认使用 IE7（标准模式内容）或 IE5（怪癖模式内容）运行，因此你不能依赖 IE 中可用的功能。我建议只使用 IE5 中可用的方法，例如使用attachEvent而不是addEventListener.

按照这篇文章 ，您应该能够定义兼容性，但对我来说它不起作用。

与问题相关：

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

于 2012-11-16T19:04:21.577 回答