jquery事件冒泡
jQuery 事件冒泡机制
事件冒泡是 DOM 事件传播的一种机制，事件从触发元素开始，逐级向上传播到祖先元素。jQuery 提供了便捷的方法来处理事件冒泡。
阻止事件冒泡的方法
event.stopPropagation()
调用该方法可以阻止事件继续向上冒泡。例如：
$('button').click(function(event) {
event.stopPropagation();
// 其他逻辑
});return false
在 jQuery 事件处理函数中返回 false 会同时阻止事件冒泡和默认行为。相当于调用了 event.stopPropagation() 和 event.preventDefault()。
$('button').click(function() {
// 逻辑代码
return false;
});事件委托与冒泡
on() 方法的事件委托
通过事件委托可以利用冒泡机制，将事件处理程序绑定到父元素，减少内存占用。例如：
$('#parent').on('click', 'button', function() {
// 处理子元素 button 的点击事件
});区分事件目标
event.target 与 event.currentTarget
event.target是实际触发事件的元素event.currentTarget是当前正在处理事件的元素（即绑定事件的元素）
$('#parent').click(function(event) {
console.log(event.target); // 实际点击的元素
console.log(event.currentTarget); // #parent
});检测事件是否已阻止冒泡
event.isPropagationStopped()
该方法返回布尔值，表示事件冒泡是否已被阻止：
$('button').click(function(event) {
console.log(event.isPropagationStopped()); // false
event.stopPropagation();
console.log(event.isPropagationStopped()); // true
});注意事项
- 阻止冒泡可能影响其他绑定在祖先元素上的事件处理程序
- 事件委托依赖于冒泡机制，过度阻止冒泡会导致委托失效
- 在事件处理函数中谨慎使用
return false，确保不需要阻止默认行为时改用event.stopPropagation()
