阻止事件e.stopPropagation()和e.preventDefault的区别

e.stopPropagation() 和 e.preventDefault() 是两个在事件处理中常用的方法，它们有不同的作用：

1. e.stopPropagation():

   • 作用：阻止事件在DOM中的进一步传播，即停止事件冒泡。
   • 使用场景：当你希望阻止一个事件从目标元素向上传播到父元素或祖先元素时，可以调用 e.stopPropagation()。
   • 示例：

     document.getElementById('myButton').addEventListener('click', function(e) {
             
             
       e.stopPropagation(); // 阻止点击事件继续向上传播
       console.log('Button clicked');
     });
     

2. e.preventDefault():

   • 作用：阻止事件的默认行为。
   • 使用场景：有些元素上的事件有默认的行为，比如点击链接会跳转到新页面，提交表单会刷新页面等。通过调用 e.preventDefault()，你可以阻止这些默认行为的发生。
   • 示例：

     document.getElementById('myForm').addEventListener('submit', function(e) {
             
             
       e.preventDefault(); // 阻止表单的默认提交行为
       console.log('Form submitted');
     });
     

这两个方法可以单独使用，也可以组合使用，具体取决于你的需求。如果你想阻止事件传播并阻止默认行为，可以同时调用这两个方法：

document.getElementById('myLink').addEventListener('click', function(e) {
    
    
  e.stopPropagation(); // 阻止点击事件继续向上传播
  e.preventDefault(); // 阻止链接的默认跳转行为
  console.log('Link clicked');
});

总的来说，e.stopPropagation() 用于阻止事件的传播，而 e.preventDefault() 用于阻止事件的默认行为。