在前端开发中，常常需要对页面上的元素进行事件绑定和处理。但是，有些情况下，我们希望阻止事件的冒泡，或者取消事件的默认行为，避免出现意外情况。本文将介绍 JavaScript 中防止事件冒泡和默认事件的方法。
阻止事件冒泡
事件冒泡指的是，当一个元素触发某个事件时，这个事件会向该元素的父元素以及祖先元素依次传递，直到传递到整个文档的根元素。我们可以通过以下方法阻止事件冒泡：
1. stopPropagation() 方法
stopPropagation() 方法是 JavaScript 中用于阻止事件冒泡的方法。例如，当一个按钮在点击时不希望触发父元素的点击事件，可以用以下代码：
document.querySelector("#button").addEventListener("click", function(event) {
event.stopPropagation();
});在上面的代码段中，stopPropagation() 方法被调用了，即在点击 #button 元素时，该事件不会向上冒泡，而是只在 #button 中触发。
2. useCapture 参数
useCapture 参数是 addEventListener() 方法的可选参数，用于控制事件的捕获行为。当该参数为 true 时，事件会先被传递到父元素，然后再传递到子元素。这样，我们可以通过在父元素上绑定事件，并将 useCapture 参数设为 true，来阻止子元素上的事件冒泡。例如：
document.querySelector("#parent").addEventListener("click", function(event) {
// do something...
}, true);在上面的代码段中，当点击子元素 #child 时，事件会先传递到 #parent，但由于 useCapture 参数为 true，所以事件不会再向上冒泡，而是只在 #child 中触发。
取消事件的默认行为
有些元素在触发某个事件时，会有默认的行为。例如，点击一个链接会跳转到另一个页面；按下回车键会提交表单等。在某些情况下，我们可能希望阻止这些默认行为，以实现自己的逻辑。以下是 JavaScript 中取消事件默认行为的方法：
1. preventDefault() 方法
preventDefault() 方法是 JavaScript 中用于取消事件默认行为的方法。例如，当一个链接需要执行 AJAX 请求时，我们通常需要取消它的默认跳转行为，以避免页面刷新。可以使用以下代码：
document.querySelector("a").addEventListener("click", function(event) {
event.preventDefault();
// do AJAX request...
});在上面的代码段中， preventDefault() 方法被调用了，即在点击链接时，该事件不会跳转到链接所在的页面，而是会执行 AJAX 请求。
2. return false
另一种取消事件默认行为的方式是，在事件处理程序中返回 false。例如：
<form onsubmit="return false;"> <input type="text" name="query"> <button type="submit">Search</button> </form>
在上面的代码段中，当点击按钮时，表单不会提交，而是只执行按钮的点击事件处理程序。但需要注意的是，这种方式只对特定的默认行为有效，如阻止表单提交、阻止链接跳转等。
总结
本文介绍了 JavaScript 中防止事件冒泡和取消默认事件的方法。其中，阻止事件冒泡可以通过 stopPropagation() 方法和 useCapture 参数实现；取消默认事件可以通过 preventDefault() 方法和 return false 实现。在开发中，正确地使用这些方法，可以帮助我们避免出现一些不必要的错误和问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a806c048841e98944a6b89