js阻止浏览器默认事件和防止事件传播事件

在JavaScript中，我们可以通过以下两种方法来阻止浏览器默认事件和防止事件传播：

1. 阻止浏览器默认事件：

• 使用 event.preventDefault() 方法：可以调用事件对象的 preventDefault() 方法来阻止浏览器对该事件的默认处理。例如，在点击链接时阻止浏览器打开该链接：

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
});

• 返回 false：在事件处理函数中，返回 false 也可以阻止浏览器默认事件。但要注意，这种方法只适用于某些特定的事件，如 onclick。例如：

<a href="#" onclick="return false;">点击我不会打开链接</a>

1. 防止事件传播（取消事件冒泡）：

• 使用 event.stopPropagation() 方法：可以调用事件对象的 stopPropagation() 方法来防止事件继续向上或向下传播。例如，在一个父元素上点击时，阻止事件传播到其子元素：

const parent = document.querySelector('.parent');
parent.addEventListener('click', function(event) {
  event.stopPropagation();
});

• 使用 event.stopImmediatePropagation() 方法：可以调用事件对象的 stopImmediatePropagation() 方法来阻止事件继续向上或向下传播，并且阻止调用该处理函数后续的其他处理函数。例如：

const element = document.querySelector('.element');
element.addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  // 在第一次点击后，不会调用后续的其他处理函数
});