Question

我有类似的代码：

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

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

还有一个限制，我无法编辑链接或其文本，我唯一可以完全控制的是img标记及其调用的onclick函数。因此，我必须阻止该链接从该img标记内进行。

任何帮助将不胜感激。

Answer 1

当目标为preventDefault

时，

点击事件只需<img>

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

Answer 2

现在我希望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）。（我们可能至少在另一年坚持使用IE8，或许更多，尽管XP终结......）

Answer 3

将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 - 使用事件对象取消事件。

Answer 4

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

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

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

是否有更多限制不允许您执行此类操作？

Answer 5

我不太清楚你的意思，但如果你想让文字有一个链接而且图像有一个onclick事件

文本

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

图像

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

阻止链接在a-href标记内的img上继续

5 个答案: