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

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标签中进入。

任何帮助将不胜感激。

- mim

Answer 1

当目标是 <img> 时，在 click 事件 上使用 preventDefault 方法即可。

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

- Paul S.

---

好的，好主意，让我检查一下是否可以使用该img标签的父引用来防止这种情况发生，因为正如我所说，我无法控制父href标签。 - mim

非常感谢，您的回答帮助我使它工作了。我像这样传递了事件对象 <a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit(event)'></a>，然后在函数 doEdit(e){} 中使用了 e.preventDefault()... 再次感谢... 我在等待它允许我接受答案。 - mim

谢谢你再次提供了灵感来解决问题，但是@T.J. Crowder发布了确切的解决方案。 - mim

Answer 2

现在，如果你点击文本，我希望href链接可以正常工作，但是如果你点击图片，则应该执行其他操作，并且不跳转到链接。

正确的做法是不要将标签放在链接中。

但是，如果你真的想这样做，请将你的onclick更改为：

onclick='doEdit(event)'

...并在doEdit函数中：

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

    // ...your img logic...
}

那将阻止点击事件冒泡到链接。你需要测试 stopPropagation，因为 IE8 及更早版本没有它（或 preventDefault），它们使用属性代替（cancelBubble = true 用于 stopPropagation，returnValue = false 用于 preventDefault）。（尽管 XP 已到寿命结束，但我们可能还得再坚持至少一年，甚至更长时间的 IE8...）

- T.J. Crowder

---

哎呀，我得到了很多正确的答案，但只能接受一个......不过我想你的答案是完美的......尽管有点晚。 - mim

@mim：我在那里本应该有“true”的地方写成了“false”，现在已经修复了。还添加了关于为什么要进行检查的说明。 - T.J. Crowder

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

---

演示 - 使用事件对象来取消事件。

---

- Nope

Answer 4

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

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

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

是否有其他限制，不允许您执行此类操作？

- philosowaffle

Answer 5

我不太确定你的意思，但如果你想让文本有一个链接，图片有一个onclick事件

文本

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

图片

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

- OHH-MYSTA-CODE

---

这不是关闭图像标签的方式，它们本质上是自闭合的。 - Jay Blanchard

啊，抱歉我不知道，我只是猜测那个div标签还没有关闭。 - OHH-MYSTA-CODE