如何阻止事件冒泡和默认行为？

在DOM事件处理中，我们经常需要控制事件的传播路径或阻止浏览器执行与事件关联的默认操作。这是通过事件对象上的两个核心方法stopPropagation()和preventDefault()来实现的，理解它们的区别至关重要。

阻止事件冒泡

事件冒泡是指事件从目标元素开始，沿DOM树向上传播到祖先元素的过程。event.stopPropagation()方法的作用就是立即停止事件在DOM层次中的进一步传播。

<div id="outer">
  <button id="inner">点击</button>
</div>
<script>
document.getElementById('outer').addEventListener('click', () => {
  console.log('外层div被触发');
});
document.getElementById('inner').addEventListener('click', (event) => {
  console.log('按钮被点击');
  event.stopPropagation(); // 阻止事件冒泡到 #outer
});
</script>

点击按钮后，只会打印“按钮被点击”，外层div的点击监听器不会执行，因为冒泡过程在按钮处被中断了。这对于防止父元素的事件处理器干扰子元素的独立行为非常有用。

阻止默认行为

许多HTML元素有内置的默认行为。例如，点击<a>标签会导航到其href，提交<form>会刷新页面，右键点击会弹出上下文菜单。event.preventDefault()方法用来告诉浏览器不要执行这个事件的默认操作。

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); // 阻止链接跳转
  console.log('链接被点击，但不会跳转');
});

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单提交刷新页面
  console.log('表单被提交，但页面不刷新');
  // 可以在此处进行AJAX提交等自定义操作
});

这个方法只阻止默认行为，但不会影响事件的传播（冒泡或捕获仍会正常进行）。

同时阻止两者

在某些情况下，你可能需要同时阻止冒泡和默认行为。

inner.addEventListener('click', (event) => {
  event.preventDefault();
  event.stopPropagation();
  console.log('一切都被阻止了');
});

注意，还有一个更强大的event.stopImmediatePropagation()方法。它不仅阻止事件向其他元素传播，还会阻止绑定在同一元素上的其他事件监听器被执行。

选择正确的阻止方式

关键要理清你的意图。如果你只是想阻止浏览器执行某个元素的默认操作（如下载文件、跳转页面），使用preventDefault()。如果你希望事件在到达某个元素后不再通知其父元素，使用stopPropagation()。这在使用事件委托时尤其重要，你可能希望在某些子元素上中断冒泡，以避免父级的统一处理逻辑被执行。

在实际开发中，合理运用这两个方法可以避免很多意想不到的交互冲突，构建出更精细、更符合设计意图的用户体验。但也要谨慎使用，过度阻止可能会破坏用户对网页行为的正常预期。