javascript - 从 HTML 区域获取关联的 img

Question

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

Answer 1

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

Answer 2

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

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”以采取替代操作。