JavaScript中的stopPropagation方法有什么用

1. stopPropagation方法介绍

在JavaScript事件中，事件传播分为冒泡和捕获两种方式，当某个元素触发某事件时，这个事件会首先从最外层的元素开始捕获，一直到目标元素，然后再从目标元素冒泡到最外层的元素，这个过程称为事件的传播。在这个过程中，如果目标元素的某一祖先元素同时也有该事件监听，事件会在目标元素和这个祖先元素之间进行传播。例如：

  document.querySelector('.child').addEventListener('click', function() {
    console.log('child clicked');
  });
  document.querySelector('.parent').addEventListener('click', function() {
    console.log('parent clicked');
  });
  document.querySelector('.grandparent').addEventListener('click', function() {
    console.log('grandparent clicked');
  });

当我们点击class为child的元素时，事件会从最外层的元素grandparent开始捕获，依次经过parent和child，然后再从child冒泡回到grandparent。这时控制台会输出：

child clicked

parent clicked

grandparent clicked

1.1 stopPropagation方法作用

有时候我们希望在某个元素上触发了某事件后，该事件不再向它的祖先元素传播，这时就需要使用事件对象的stopPropagation方法。该方法可以阻止事件继续向外传播。

1.2 stopPropagation方法用法

stopPropagation方法的用法非常简单，只需调用事件对象的stopPropagation方法即可。以下是一个例子：

  document.querySelector('.child').addEventListener('click', function(e) {
    console.log('child clicked');
    e.stopPropagation(); // 阻止事件向上冒泡传播
  });
  document.querySelector('.parent').addEventListener('click', function() {
    console.log('parent clicked');
  });
  document.querySelector('.grandparent').addEventListener('click', function() {
    console.log('grandparent clicked');
  });

当我们点击class为child的元素时，事件会从最外层的元素grandparent开始捕获，依次经过parent和child。此时，child的click事件被触发，并且调用了e.stopPropagation()方法阻止了该事件继续冒泡。因此，控制台只会输出：child clicked，不会输出其他信息。

2. 实际应用场景

2.1 阻止表单提交并防止重复提交

在表单中，如果用户多次点击提交按钮，可能会导致表单重复提交，这时我们可以使用stopPropagation方法阻止事件向上冒泡传播，从而避免表单重复提交。

  var form = document.querySelector('form');
  function handleSubmit(e) {
    e.stopPropagation(); // 阻止事件向上冒泡传播
    e.preventDefault(); // 阻止表单提交
    form.submitBtn.disabled = true; // 禁用提交按钮
    // 数据处理
    sendDataToServer(function() {
      form.submitBtn.disabled = false; // 启用提交按钮
    });
  }
  form.addEventListener('submit', handleSubmit);

当用户点击提交按钮时，handleSubmit函数会被调用，然后该函数会使用stopPropagation方法阻止事件向上冒泡传播，并且使用preventDefault方法阻止表单提交。这样可以避免表单重复提交。然后，handleSubmit函数会使用sendDataToServer方法向服务器发送数据，并在数据处理完成后启用提交按钮，防止用户无法再次提交表单。

2.2 阻止默认行为

在某些情况下，我们可能需要阻止默认行为，例如：

禁用链接跳转

禁用右键菜单

禁用选中文本

这时我们可以使用stopPropagation方法来阻止事件的默认行为，并且不影响事件向上冒泡传播。

  var link = document.querySelector('a');
  link.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件向上冒泡传播
    e.preventDefault(); // 阻止链接跳转
    doSomething(); // 或者其他自定义的操作
  });

当用户点击链接时，该事件会冒泡到body元素，如果此时我们的页面中有添加了类似下面的代码：

  document.body.addEventListener('click', function() {
    doSomething();
  });

这时，如果没有使用stopPropagation方法，点击链接会触发doSomething函数两次，因为事件冒泡到了body元素并触发了该元素的click事件。而使用stopPropagation方法可以避免该情况发生，只会触发一次doSomething函数。

2.3 阻止事件委托

事件委托是常见的JavaScript编程模式之一，它可以避免给大量的DOM元素添加事件监听器，提高性能。但是有时候我们可能需要阻止事件委托，在目标元素上触发该事件，并且不再向上冒泡传播。

  var ul = document.querySelector('ul');
  ul.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      console.log('点击了li元素');
      e.stopPropagation(); // 阻止事件向上冒泡传播
    }
  });

当我们点击ul元素中的li元素时，事件会冒泡到ul元素，并触发ul元素的click事件。这时我们可以使用stopPropagation方法阻止该事件向上冒泡传播，从而避免其他元素上的事件监听器被触发。

3. 总结

stopPropagation方法可以阻止事件向上冒泡传播，从而避免其他元素上的事件监听器被触发。该方法可以被广泛应用于表单提交、阻止默认行为、阻止事件委托等场景。但是，在使用该方法时，需要谨慎考虑：是否需要阻止事件向上冒泡传播，是否需要阻止默认行为，是否需要阻止事件委托等。在实际应用中，我们需要根据具体情况选择使用该方法，以便达到最佳的编程效果。