Javascript,阻止preventDefault()传递给子元素

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触发侦听器的所有s:

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没有多大意义..？)