取消对HTML锚标记的冒泡

Question

我在我的网页上进行了以下设置

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

有没有办法可以用来避免触发div的click事件.我认为它与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>