e.stopPropagation() 和 e.preventDefault() 是 JavaScript 事件处理中两个关键方法，它们的核心区别在于作用对象和场景：
1. 核心功能区别
| 方法 | 作用目标 | 使用场景示例 |
|---|---|---|
| stopPropagation() | 阻止事件传播（冒泡或捕获） | 防止事件从当前元素向上层父元素传递。例如：点击子元素时阻止触发父元素的点击事件。 |
| preventDefault() | 阻止事件的默认行为 | 取消浏览器对特定元素的默认响应。例如：阻止表单提交、链接跳转、右键菜单弹出。 |
2. 具体行为解析
e.stopPropagation()
- 事件传播阶段：无论是事件冒泡（从子元素到父元素）还是捕获（从父元素到子元素），调用该方法会立即停止事件进一步传播。
- 示例：
若一个
<div>内部嵌套<button>，点击按钮时默认会触发按钮和父容器的点击事件。使用该方法后，父容器的事件不再触发：
button.addEventListener("click", (e) => {
e.stopPropagation(); // 阻止父级监听点击事件
console.log("按钮点击");
});
e.preventDefault()
- 默认行为拦截：仅针对具有默认行为的事件生效（如
<a>跳转、<form>提交、<input>回车提交）。 - 示例：阻止表单自动刷新页面，改为异步提交：
form.addEventListener("submit", (e) => {
e.preventDefault(); // 阻止表单默认提交行为
fetch("/api/submit", { method: "POST" });
});
3. 常见应用场景对比
| 场景 | e.stopPropagation() | e.preventDefault() |
|---|---|---|
| 点击链接不跳转 | ❌ | ✅（阻止默认跳转） |
| 阻止表单自动提交 | ❌ | ✅（阻止页面刷新） |
| 父元素不响应子元素事件 | ✅（阻止冒泡） | ❌ |
| 自定义右键菜单 | ❌ | ✅（阻止浏览器菜单） |
4. 组合使用与注意事项
- 联合使用：某些场景需同时阻止默认行为和事件传播。例如，点击按钮既要阻止表单提交，又要避免触发父容器的点击监听：
button.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); // 自定义逻辑 }); - 执行顺序：建议先调用 e.stopPropagation() 再执行其他操作（如业务逻辑或 e.preventDefault()），以保持代码意图清晰。
- 兼容性：e.stopPropagation() 是标准方法；旧版 IE 浏览器需使用 e.cancelBubble = true 实现类似功能。
总结
- 何时用 stopPropagation ：需要隔离事件传播（如避免父级触发相同事件）时。
- 何时用 preventDefault ：需要覆盖浏览器默认行为（如自定义表单提交、链接拦截）时。 两者可独立使用，也可组合应对复杂交互需求。
