取消 HTML 锚标记上的冒泡

Question

我的网页上有以下设置

<div id="clickable">
  <a href="hello.com">Here!</a>
</div>

有什么方法可以避免触发 div 的点击事件。我认为这与在

onclick

属性中为锚标记设置某些内容有关，但尝试像

e.preventDefault()

这样的简单操作没有用。

帮助？谢谢！

Answer 1

e.preventDefault();不会在 onclick 属性中工作，因为 e 未定义。还有 e.preventDefault();不想让你停止冒泡，你需要 e.stopPropagation();

要么使用；

onclick="$(this).stopPropagation();"

在你的锚上，或者

$(a).click(function(e){
  e.stopPropagation();
});

在你的活动中。

Answer 2

Vanilla JS 对已接受答案的扩展。

event.stopPropagation()

是在不禁用默认行为的情况下防止事件冒泡到父容器的最具体和可预测的方法。在以下示例中，

<a/>

不会触发警报，即使它包含在可点击的

<div/>

中。

<script>
  function linkHandler(event) {
    event.stopPropagation()
  }
</script>
<div onclick="alert('fail)">
  <a href="http://stackoverflow.com" onclick="linkHandler(event)">Link</a>
</div>

Answer 3

e.preventDefault()

不会阻止事件冒泡。您需要添加

e.stopPropagation()

，或将其替换为

return false

.

您可以在这个答案中阅读更多关于这三者之间的区别。

Answer 4

你可以使用 onclick="return false;"

<a href="#" onclick="return false;">stuff</a>

Answer 5

您可以

return false;

或确保您的函数使用

e

作为参数

$("#clickable a").click(function(e){
   //stuff
   e.preventDefault;
});

Answer 6

香草JS

<a href="https://stackoverflow.com" onclick="event.stopPropagation()">