取消HTML锚标记上的冒泡

Cancel bubbling on an HTML anchor tag

本文关键字：HTML 取消      更新时间：2023-09-26

我的网页设置如下

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

是否有一种方法可以用来避免触发div的单击事件。我认为这与在锚标记的onclick属性中设置一些东西有关，但尝试简单的事情，如e.preventDefault()没有工作。

帮助吗?谢谢!

e.preventDefault();在onclick属性中不起作用，因为e没有定义。还e.preventDefault ();如果你想停止冒泡，你需要e.p stoppropagation ();

要么使用;

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

，或者

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

基于接受答案的香草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>

e.preventDefault()不能阻止事件冒泡。您需要添加e.stopPropagation()，或者替换为return false。

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

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

您可以使用return false;或确保您的函数使用e作为参数

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

接受的答案需要jQuery。要在普通Javascript中实现内联，可以使用全局对象(window)的event属性，所有主流浏览器都支持该属性。在引用window.的属性时，可以省略它。

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

Mozilla文档将此属性的状态描述为已弃用，但WhatWG只是说强烈鼓励开发人员使用下面的替代方法。下面是官方认可的方式:

<a id="mylink" href="https://stackoverflow.com">
<script>
  document.getElementById('mylink').addEventListener('click', evt => {
    evt.stopPropagation()   
  })
</script>

认真呢?我已经做出了选择。你也可以。

最好的做法是注册一个事件处理程序，但如果您只想做一些非常简单的事情，请这样做:

  <a href="hello.com" onclick="event.stopPropagation()">Here!</a>
相关文章：