在JavaScript中，如何在动作向下传递时取消冒泡与阻止默认事件？

2023-10-12 11:34:28

取消冒泡

当事件发生后，会沿着DOM树向上冒泡，直到到达文档对象。冒泡可以让我们在父元素上监听子元素的事件，但有时我们需要阻止冒泡，只让事件在触发元素上执行回调函数。

在JavaScript中，可以使用 event.stopPropagation() 方法来阻止冒泡。该方法会阻止事件继续向上传播，使事件只在触发元素上执行回调函数。

element.addEventListener('click', function(event) {
  // 阻止事件冒泡
  event.stopPropagation();

  // 执行回调函数
  console.log('触发了单击事件');
});

阻止默认事件

某些事件具有默认行为，例如，当单击链接时，会跳转到该链接指向的页面；当单击按钮时，会提交表单。我们可以使用 event.preventDefault() 方法来阻止这些默认行为。

element.addEventListener('click', function(event) {
  // 阻止默认行为
  event.preventDefault();

  // 执行回调函数
  console.log('触发了单击事件');
});

兼容性

event.stopPropagation() 和 event.preventDefault() 方法在大多数浏览器中都是兼容的，但 IE8 及更早版本不支持这些方法。如果需要兼容 IE8 及更早版本，可以使用 attachEvent() 方法来监听事件，并使用 cancelBubble 和 returnValue 属性来阻止冒泡和默认事件。

element.attachEvent('onclick', function() {
  // 阻止冒泡
  this.cancelBubble = true;

  // 阻止默认行为
  this.returnValue = false;

  // 执行回调函数
  console.log('触发了单击事件');
});