单击子div时如何停止父href标签的重定向？答案

【问题标题】：how to stop redirection of parent href tag when clicked on child div?单击子div时如何停止父href标签的重定向？
【发布时间】：2014-09-03 18:27:14
【问题描述】：

我有以下结构

代码

 <a href="blah.html" class="re-direct">
    <div class="1div"></div>
    <div class="2div">
       <div class="click" data-id="text">click</div>
    </div>
 </a>
 <script>
  $(document).on('click',".click",function(){ alert($(this).data('id')) })
 </script>

上面的代码工作正常，但它重定向到页面 blah.html 我如何阻止它重定向？

【问题讨论】：

标签： javascript jquery html css href

【解决方案1】：

您需要阻止点击事件在 DOM 中向上传播到 a 元素，同时还要阻止链接的默认行为：

$(document).on('click', ".click", function(e) {
  e.stopPropagation();
  e.preventDefault();
  console.log($(this).data('id'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="blah.html" class="re-direct">
  <div class="1div"></div>
  <div class="2div">
    <div class="click" data-id="text">click</div>
  </div>
</a>

【讨论】：

是的，现在它可以工作，但会返回相同的错误工作？
@RoryMcCrossan 在链接之外有没有 preventDefault() 的使用？
@Mr.coder 是的，虽然返回 false 会杀死函数返回的所有内容，这可能不是预期的行为。不过在这种情况下应该没问题。
@Claudiu 是的。例如，它可以用于submit 事件以停止表单提交。