javascript 取消HTML锚标记上的冒泡

ia2d9nvy  于 2023-04-28  发布在  Java
关注(0)|答案(6)|浏览(140)

我的网页上有以下设置

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

有没有一种方法可以避免触发div的click事件。我推测这与在锚标记的onclick属性中设置某些内容有关,但尝试像e.preventDefault()这样的简单操作并不奏效。
帮忙?谢谢!

irlmq6kh

irlmq6kh1#

e.PreventDefault();在onclick属性中不能工作,因为e没有定义。e. println();你不想停止冒泡,你需要e。return();
要么使用;

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

在你的锚上,或者

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

在你的活动中。

yhived7q

yhived7q2#

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>
hm2xizp9

hm2xizp93#

e.preventDefault()不会阻止事件冒泡。您需要添加e.stopPropagation(),或将其替换为return false
您可以在differences between these three in this answer上阅读更多内容。

xe55xuns

xe55xuns4#

你可以使用onclick=“return false;”
<a href="#" onclick="return false;">stuff</a>

fnx2tebb

fnx2tebb5#

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

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

yshpjwxd6#

接受的答案需要jQuery。要在vanilla Javascript中内联执行,可以使用全局对象(window)的event属性,all major browsers支持该属性。当引用其属性时,可以omitwindow.

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

Mozilla文档将此属性的状态描述为deprecated,但WhatWG只是强烈鼓励开发人员使用以下替代方案。以下是官方认可的方法:

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

真的吗我已经做出选择了你也可以

相关问题