从 HTML 区域获取关联的 img答案

【问题标题】：Getting associated img from HTML area从 HTML 区域获取关联的 img
【发布时间】：2009-05-03 20:26:14
【问题描述】：

有两个 img 元素使用同一个 map 和一个区域。现在，我们绑定例如area 元素的点击事件处理程序。是否可以从事件处理程序中确定单击了哪个图像实例？

【问题讨论】：

【解决方案1】：

是的，您可以通过以下任一方式确定点击了哪张图片：

附加单个事件处理程序在父元素上并检查 event.target 属性
附加单个事件处理程序在每个图像元素上。

例如，如果您的 HTML 如下所示：

<div id="container">
    <img id="myimage1" usemap="theMap" />
    <img id="myimage2" usemap="theMap" />
    <map name="theMap">
    ...
    </map>
</div>

那么可能的解决方案是：

document.getElementById('container').onclick = function(evt) {
    var target = evt.target || window.event.srcElement;

    switch(target.id) {

        case 'myimage1':
            alert('you clicked on myimage1');
            break;

        case 'myimage2':
            alert('you clicked on myimage2');
            break;

        default:
            // click handler got some other evet
    }
}

document.getElementById('myimage1').onclick = function() {
    alert('you clicked on myimage1');
}
document.getElementById('myimage2').onclick = function() {
    alert('you clicked on myimage2');
}

根据您在捕获事件后想要执行的操作，您必须返回“true”以允许 URL 继续执行，或返回“false”以采取替代操作。

【讨论】：

【解决方案2】：

一个可能的解决方案是使用它的 offsetParent 属性。这样，我得到了父母，这是我最初需要的。只要图像包含在不同的 div 中，查找图像本身也应该不会太难。

【讨论】：