Question

我有一个div容器，出于某种原因，我必须在其中添加e.preventDefault()，但令人惊讶的是，它停止了锚元素也能完成其工作

jQuery('#anything').on("click", function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
  <a href="https://google.com"> Link should work </a>
</div>

我没想到锚不会起作用，我以前从未处理过。我在某处按照建议尝试了StopPropagation()，但这没用

如何使锚点重新工作？

Answer 1

一种选择是使用事件委托，并从触发监听器中排除所有a：

jQuery('#anything').on("click", '*:not(a)', function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
  <a href="https://google.com"> Link should work </a>
</div>

或者，如果您要确保#anything的子级中没有任何单击会触发侦听器，请改用#anything作为委托选择器。这次使用本机Javascript：

document.querySelector('#anything').addEventListener('click', (e) => {
  console.log('listener running');
  if (!e.target.matches('#anything')) return;
  console.log('prevented default');
  e.preventDefault();
});

<a href="www.google.com" id="anything">Parent A<span>Child Span</span></a>

（尽管preventDefault()上的div没多大意义..？）

Answer 2

在子元素上使用e.stopPropagation();方法。

jQuery('#anything').on("click", function(e){
	      e.preventDefault();

        });
jQuery('#a1').on("click", function(e){
           e.stopPropagation();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
    <a href="https://google.com" id="a1"> Link should work </a>
 </div>

Answer 3

要停止preventDefault（）传递给 all 子元素，您必须在所有子级单击的对象上使用stopPropagation

jQuery('#anything').on("click", function(e){
    e.preventDefault();
 }).children().click(function(e) { // catch all children click
    e.stopPropagation();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
    <a href="https://google.com"> Link should work </a>
 </div>

Javascript，停止preventDefault（）传递给子元素

3 个答案: