js 阻止冒泡和默认事件
在前端开发中，我们经常会遇到需要阻止事件冒泡或者阻止默认事件的情况。本文将详细介绍如何使用 JavaScript 来实现这两种功能。
阻止事件冒泡
事件冒泡指的是当一个元素上的事件被触发之后，该事件会向上或者向父级元素传播。有时候我们需要阻止事件冒泡，使事件只在当前元素上触发，而不向上传播。
方法一：使用 event.stopPropagation()
event.stopPropagation() 方法可以阻止事件冒泡。当事件被触发时，调用 event.stopPropagation() 即可阻止事件继续向上传播。
示例代码如下：
document.getElementById('parent').addEventListener('click', function(event) {
event.stopPropagation();
console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(event) {
console.log('Child clicked');
});
在上面的代码中，当点击子元素时，父元素的事件不会被触发，控制台只会输出 “Child clicked”。
方法二：使用事件捕获模式
除了使用 event.stopPropagation() 方法，还可以使用事件捕获模式来阻止事件冒泡。在 addEventListener 方法中，将第三个参数设置为 true，即可使用事件捕获模式。
示例代码如下：
document.getElementById('parent').addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
document.getElementById('child').addEventListener('click', function(event) {
console.log('Child clicked');
});
同样的效果，点击子元素时只会触发子元素的事件，父元素的事件不会被触发。
阻止默认事件
有时候我们希望阻止元素的默认事件，例如点击链接时不跳转到新页面，或者提交表单时不刷新页面。在 JavaScript 中，可以使用 event.preventDefault() 方法来阻止元素的默认事件。
示例一：阻止链接跳转
在上面的示例中，点击链接时会输出 “Link clicked but page did not jump”，同时页面不会跳转到新的网址。
示例二：阻止表单提交
在上面的示例中，点击提交按钮时会输出 “Form submitted but page did not refresh”，同时页面不会刷新。
总结
通过本文的介绍，我们学习了如何使用 JavaScript 阻止事件冒泡和阻止默认事件。在前端开发中，熟练掌握这两种技巧能够帮助我们更好地控制页面上的交互行为，提升用户体验。