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

推荐答案

在 JavaScript 中，可以通过以下方式阻止事件冒泡和默认行为：

阻止事件冒泡

使用 event.stopPropagation() 方法可以阻止事件冒泡。例如：

element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 其他逻辑
});

阻止默认行为

使用 event.preventDefault() 方法可以阻止事件的默认行为。例如：

element.addEventListener('submit', function(event) {
  event.preventDefault();
  // 其他逻辑
});

本题详细解读

事件冒泡

事件冒泡是事件从目标元素向上传播到文档根节点的过程。默认情况下，事件会从触发事件的元素开始，逐级向上传播到父元素，直到文档根节点。通过调用 event.stopPropagation() 方法，可以阻止事件继续向上冒泡。

默认行为

某些 HTML 元素具有默认行为，例如点击链接会跳转到指定 URL，提交表单会刷新页面等。通过调用 event.preventDefault() 方法，可以阻止这些默认行为的发生。

结合使用

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

element.addEventListener('click', function(event) {
  event.stopPropagation();
  event.preventDefault();
  // 其他逻辑
});

通过这种方式，你可以完全控制事件的行为，确保它不会传播到其他元素，也不会触发默认行为。