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>
   

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

   • 使用 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();
     // 在第一次点击后，不会调用后续的其他处理函数
   });