阻止事件冒泡和默认行为

JavaScript 中阻止事件冒泡和默认行为的三种方法

问题

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

阻止事件向父元素传播，但不影响默认行为。

element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 事件不会冒泡到父元素
  // 但链接仍会跳转、表单仍会提交
});

阻止浏览器的默认行为，但事件仍会冒泡。

link.addEventListener('click', function(event) {
  event.preventDefault();
  // 链接不会跳转
  // 但事件会继续冒泡到父元素
});

在事件处理函数中返回 false，同时阻止冒泡和默认行为。

element.onclick = function(event) {
  // 处理逻辑
  return false;
  // 等同于调用 stopPropagation() + preventDefault()
};

注意：return false 只在 DOM0 级事件（onclick）和 jQuery 中有效，在 addEventListener 中无效。