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

Posted 2023-03-05

【中文标题】单击子div时如何停止父href标签的重定向？

【英文标题】：how to stop redirection of parent href tag when clicked on child div?

【发布时间】：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 我如何阻止它重定向？

【参考方案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 事件以停止表单提交。