3.阻止冒泡与默认行为
输入“/”快速插入内容
3.阻止冒泡与默认行为
3.阻止冒泡与默认行为
用户8691用户86912025年9月9日修改
在事件处理中，有时我们需要更精细地控制事件的行为。浏览器为我们提供了两个强大的工具：event.stopPropagation() 和 event.preventDefault()，它们分别用于控制事件的“传播”和“默认动作”。
1. event.stopPropagation()：截断事件的传播之路
•
功能: 阻止事件从当前元素继续向上冒泡到父元素。
•
核心场景: 当一个元素和它的父元素都绑定了相同的事件（如 click）时，我们可能只希望触发子元素的事件，而不希望“打扰”到父元素。
•
比喻: 事件冒泡就像水中的涟漪，会一圈圈向外扩散。event.stopPropagation() 就像在涟漪扩散的路径上立刻放置了一道屏障，让涟漪无法继续向外传播。
示例：卡片内的关闭按钮
想象一个可以点击的卡片（div.card），点击后会跳转到详情页。卡片右上角有一个关闭按钮（span.close），点击它应该只关闭卡片，而不是跳转页面。
HTML 结构:
代码块
<div class="card">
我是一张卡片，点击我会跳转...
<span class="close">×</span>
</div>
JavaScript 实现:
代码块
const card = document.querySelector('.card');
const closeBtn = document.querySelector('.close');
// 父元素：卡片的点击事件
card.addEventListener('click', () => {
console.log('触发了卡片的点击事件，准备跳转页面！');
// window.location.href = '/details';
});
// 子元素：关闭按钮的点击事件
closeBtn.addEventListener('click', (event) => {
// 关键：阻止事件冒泡到父元素 card 上
event.stopPropagation();
console.log('触发了关闭按钮的点击事件，卡片已关闭。');
card.style.display = 'none';
});
运行效果:
•
如果点击卡片的空白区域: 控制台会输出 触发了卡片的点击事件，准备跳转页面！。
•
如果点击 × 关闭按钮: 因为调用了 event.stopPropagation()，事件在 <span> 处就被截断了，不会再冒泡到 <div class="card">。因此，控制台只会输出 触发了关闭按钮的点击事件，卡片已关闭。，而不会触发卡片的跳转行为。
2. event.preventDefault()：取消浏览器默认行为的“常规操作”
•
功能: 取消与特定事件关联的浏览器默认行为。
•
核心场景: 阻止链接的默认跳转行为、阻止表单的默认提交行为等。
示例1：阻止链接跳转