如何防止单击锚点元素内的图像时出现链接行为

How can I prevent link behavior on clicking an image inside an anchor element?

本文关键字：链接 图像 单击 何防止 元素      更新时间：2023-09-26

我有一个类似的代码：

<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></a>

现在，如果你点击文本，我希望href链接能正常工作，但如果你点击图像，它应该做一些其他事情，而不是转到链接。

还有一个限制，我不能编辑链接或其文本，我唯一可以完全控制的是img标记及其所谓的onclick函数。所以我必须阻止链接从img标记中继续。

任何帮助都将不胜感激。

当目标是<img> 时，仅点击事件上的preventDefault

yourAnchor.addEventListener('click', function (e) {
    if (e.target.tagName === 'IMG')
        e.preventDefault();
});

现在，如果你点击文本，我希望href链接能正常工作，但如果你点击图像，它应该做一些其他事情，而不是转到链接。

正确的方法是不要将img放在链接中。

然而，如果你真的想这么做，请将onclick更改为：

onclick='doEdit(event)'

在doEdit:中

function doEdit(event) {
    if (event.stopPropagation) {
        event.stopPropagation();    // Standard
    }
    else {
        event.cancelBubble = true;  // Old IE
    }
    // ...your img logic...
}

这将防止click事件冒泡到链接。您需要对stopPropagation进行测试，因为IE8和早期版本没有它（或preventDefault），而是使用属性（cancelBubble = true用于stopPropagation，returnValue = false用于preventDefault）。（尽管XP已经报废，但我们可能还要使用IE8至少一年，甚至更长时间…）

将event传递到doEvent方法调用，类似于：

<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit(event)'></a>

然后，您可以调用event.preventDefault()取消活动并做自己的事情，类似于以下内容：

function doEdit(event){
    // your code here
    event.preventDefault();
}

DEMO-使用事件对象取消事件。

我不太确定你的意思，但如果你希望文本有链接，图像有onclick事件

文本

<a href='link.html'>goto link page</a>

图像

 <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></img>

我最初的想法是简单地从链接标签之间删除图像标签。

    <a href='link.html'>goto link page</a>
    <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'/>

有没有更多的限制不允许你做这样的事情？

相关文章：