当前位置：文江博客话题详情

从HTML区域获取关联的img

发布于 2024-07-18 22:16:38 字数 138 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一城柳絮吹成雪 2024-07-25 22:16:38

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

附加单个事件处理程序
在父元素上并检查
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”以采取替代操作。

Yes, you can determine which image was clicked on by either:

attaching a single event handler
on a parent element and inspecting
the event.target property
attaching individual event handlers
on each image element.

For example, if your HTML looks like:

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

then the possible solutions are:

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

Depending on what you want to do after you capture the event, you'll have to return either 'true' to allow the URL to follow through, or 'false' to take an alternate action.

回复收藏 0 原文