在JavaScript开发中，事件冒泡是当一个元素接收到事件时，该事件不仅会在该元素上发生，还会向上传播到父元素，直至顶层文档对象。事件冒泡机制允许事件处理程序从最深的节点开始，逐级向上传播到根节点，这可以被用来简化事件处理。但有时候我们需要阻止事件冒泡，以免触发父元素上绑定的事件处理函数。
在本次讲解中，我们将通过几种方法来了解如何在JavaScript中阻止事件冒泡：
1. 使用event.stopPropagation()
event.stopPropagation()是一个方法，调用它会阻止事件继续传播到DOM树的其他节点。这在使用jQuery时尤其常见。例如，在一个事件处理函数中，你可以通过传递事件对象作为参数，并调用event.stopPropagation()来阻止事件冒泡：
```javascript
$("#hr_three").click(function(event){
event.stopPropagation();
});
```
这段代码将会在点击`#hr_three`时阻止事件继续向上冒泡到`divTwo`和`divOne`元素。
2. 使用return false
在JavaScript中，如果你在一个事件处理函数中返回`false`，它不仅会停止事件冒泡，还会阻止事件的默认行为（例如，链接的跳转）。在不使用jQuery的情况下，例如原生JavaScript，你可以这样做：
```javascript
document.getElementById("hr_three").onclick = function(event){
// 阻止冒泡和默认行为
return false;
};
```
这段代码会阻止事件冒泡并且阻止a标签的默认行为（访问链接）。如果使用jQuery，`return false`在事件处理函数中同样有效。
3. 使用event.preventDefault()
event.preventDefault()是另一个常用的方法，用于阻止事件的默认行为，比如表单的提交、链接的跳转等。但需要注意的是，此方法不会阻止事件冒泡。
```javascript
$("#hr_three").click(function(event){
event.preventDefault();
});
```
这段代码阻止了`#hr_three`元素的默认行为，即阻止了页面跳转到百度，但事件仍然会冒泡到父元素。
在这篇文章中，我们还提到了在HTML中设置元素的事件处理程序，例如：
```html
<a href="***" onclick="alert('我是最里层！');">点击我</a>
```
这种方式通过HTML属性直接在标签内定义了事件处理函数，但在实际开发中，通常推荐使用JavaScript或jQuery来处理事件，以便更好地维护和分离逻辑代码。
总结来说，阻止事件冒泡和阻止默认行为是两种不同的操作，它们有时会被同时使用，有时只需要使用其中一种。在开发过程中，开发者应该根据实际需要选择合适的方法来处理事件，以确保程序按照预期工作。例如，当创建自定义的组件或模块时，经常需要使用`event.stopPropagation()`来避免事件处理程序之间的冲突。在表单验证或按钮点击中，常常需要使用`event.preventDefault()`来阻止表单的提交或链接的跳转等默认行为。
