js 阻止冒泡和默认事件|极客笔记

js 阻止冒泡和默认事件

在前端开发中，我们经常会遇到需要阻止事件冒泡或者阻止默认事件的情况。本文将详细介绍如何使用 JavaScript 来实现这两种功能。

阻止事件冒泡

事件冒泡指的是当一个元素上的事件被触发之后，该事件会向上或者向父级元素传播。有时候我们需要阻止事件冒泡，使事件只在当前元素上触发，而不向上传播。

方法一：使用 event.stopPropagation()

event.stopPropagation() 方法可以阻止事件冒泡。当事件被触发时，调用 event.stopPropagation() 即可阻止事件继续向上传播。

示例代码如下：

document.getElementById('parent').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked');
});

在上面的代码中，当点击子元素时，父元素的事件不会被触发，控制台只会输出 “Child clicked”。

方法二：使用事件捕获模式

除了使用 event.stopPropagation() 方法，还可以使用事件捕获模式来阻止事件冒泡。在 addEventListener 方法中，将第三个参数设置为 true，即可使用事件捕获模式。

示例代码如下：

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Parent clicked');
}, true);

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked');
});

同样的效果，点击子元素时只会触发子元素的事件，父元素的事件不会被触发。

阻止默认事件

有时候我们希望阻止元素的默认事件，例如点击链接时不跳转到新页面，或者提交表单时不刷新页面。在 JavaScript 中，可以使用 event.preventDefault() 方法来阻止元素的默认事件。

示例一：阻止链接跳转

<a href="https://www.example.com" id="link">点击跳转</a>

<script>
document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link clicked but page did not jump');
});
</script>

在上面的示例中，点击链接时会输出 “Link clicked but page did not jump”，同时页面不会跳转到新的网址。

示例二：阻止表单提交

<form id="form">
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Form submitted but page did not refresh');
});
</script>

在上面的示例中，点击提交按钮时会输出 “Form submitted but page did not refresh”，同时页面不会刷新。