从HTML区域获取关联的img

Question

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

Answer 1

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

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

例如，如果你的HTML看起来像：

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

然后可能的解决方案是：

1）

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
    }
}

2）

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

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

Answer 2

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