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