event.stopPropagation 和 event.preventDefault 有什么区别

Java

event.stopPropagation 和 event.preventDefault 是JavaScript中常用的事件处理方法。尽管它们的名称相似，但它们在功能上有着明显的区别。

event.stopPropagation 方法用于阻止事件的进一步传播，即停止事件冒泡。事件冒泡是指当一个元素上发生某个事件时，它会向父元素传播，直到传播到文档的根节点。通过调用 event.stopPropagation 方法，可以阻止事件继续向上层元素传播，从而避免被其他元素的事件监听器捕获和处理。这种方法常用于避免事件在嵌套元素中重复触发。

event.preventDefault 方法用于取消事件的默认行为。在某些情况下，当特定的事件触发时，浏览器会执行默认的操作。例如，当用户点击一个链接时，浏览器会默认打开一个新的页面。通过调用 event.preventDefault 方法，可以阻止浏览器执行默认的操作，从而自定义事件的行为。这种方法常用于表单提交、链接点击等场景，以避免页面刷新或跳转。

下面是一个简单的案例代码，用于说明 event.stopPropagation 和 event.preventDefault 方法的应用：

html
<!DOCTYPE html>
<html>
  <head>
    <title>事件处理示例</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        <button id="button">点击我</button>
      </div>
    </div>
    <script>
      const outer = document.getElementById('outer');
      const inner = document.getElementById('inner');
      const button = document.getElementById('button');
      outer.addEventListener('click', function(event) {
        console.log('点击了外层元素');
      });
      inner.addEventListener('click', function(event) {
        event.stopPropagation();
        console.log('点击了内层元素');
      });
      button.addEventListener('click', function(event) {
        event.preventDefault();
        console.log('点击了按钮');
      });
    </script>
  </body>
</html>

在上述代码中，我们有一个外层元素（outer）、内层元素（inner）和一个按钮（button）。当点击按钮时，会触发按钮的点击事件，并阻止默认行为，控制台会输出"点击了按钮"。如果没有调用 event.preventDefault 方法，点击按钮时会默认刷新页面。当点击内层元素时，会触发内层元素的点击事件，并调用 event.stopPropagation 方法，阻止事件继续向上层元素传播，控制台会输出"点击了内层元素"，而外层元素的点击事件将不会被触发。如果没有调用 event.stopPropagation 方法，点击内层元素时，外层元素的点击事件也会被触发，控制台会输出"点击了内层元素"和"点击了外层元素"。

：

event.stopPropagation 方法用于阻止事件冒泡，停止事件的传播。而 event.preventDefault 方法用于取消事件的默认行为，自定义事件的行为。在实际开发中，根据具体需求选择使用这两种方法，可以更灵活地控制事件处理流程。