时间戳

首页 > 解决方案 > Javascript，停止 preventDefault() 以传递给子元素

javascript - Javascript，停止 preventDefault() 以传递给子元素

问题描述

我有一个 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>

没想到anchor不工作，我以前从来没有处理过这个。我按照某处的建议尝试StopPropagation()了，但这没有用

我怎样才能让锚再次工作？

标签： javascriptjqueryhtml

解决方案

一种选择是使用事件委托并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没有多大意义..？）

推荐阅读