本文深入解析 preventDefault() 在事件冒泡过程中的实际作用机制，说明为何父元素上调用它会意外阻止子元素的默认行为，并提供精准控制的解决方案。
本文深入解析 `preventdefault()` 在事件冒泡过程中的实际作用机制，说明为何父元素上调用它会意外阻止子元素的默认行为，并提供精准控制的解决方案。
在 Web 开发中，event.preventDefault() 常被误认为“仅阻止当前元素的默认行为”，但其真实行为更微妙：它并非绑定于某个特定 DOM 节点，而是在整个事件传播链（capture + bubble 阶段）中，只要任一监听器调用了 preventDefault()，浏览器就会在整个事件生命周期结束后，取消与该事件关联的全局默认动作——对 dragstart 而言，这个默认动作是“启动拖拽流程”，它由浏览器统一判定，而非逐元素独立触发。
这正是问题的核心：当
被拖拽时，dragstart 事件按冒泡顺序依次触发 elem3 → elem2 → elem1。虽然 elem3 自身的处理器未调用 preventDefault()，但 elem2 的处理器执行了 event.preventDefault()。此时，浏览器在事件传播完成后检查：“本次 dragstart 是否被任何监听器阻止？” 答案为是 → 整个拖拽操作被取消，elem3 也无法被拖动。
⚠️ 关键澄清：
- stopPropagation() 只影响事件是否继续传递，不影响默认行为是否发生；
- preventDefault() 的效果是“全局标记”，一旦触发即生效，与调用位置（目标元素或祖先）无关；
- draggable="true" 元素的拖拽能力依赖 dragstart 默认行为未被取消——这是浏览器级约束，不是 DOM 层面的属性开关。
✅ 正确做法：精准拦截，只阻止目标匹配的元素
要实现“仅禁止 elem2 拖拽，允许 elem3 正常拖拽”，必须在 elem2 的事件处理器中判断事件是否真正起源于它自身（即 event.target === elem2），而非其子元素：
const elem2 = document.getElementById("elem2");
elem2.addEventListener("dragstart", function(event) {
// 仅当拖拽直接发生在 elem2 上时才阻止
if (event.target === this) {
event.preventDefault();
}
});或使用箭头函数（注意 this 绑定差异）：
elem2.addEventListener("dragstart", (event) => {
if (event.target === elem2) {
event.preventDefault();
}
});? 提示：event.currentTarget 始终指向当前绑定监听器的元素（此处恒为 elem2），而 event.target 指向事件最初触发的元素（可能是 elem3）。因此，区分 target 和 currentTarget 是实现精准控制的关键。
? 补充验证：观察事件流
添加日志可清晰验证冒泡路径与 target/currentTarget 差异：
function logEvent(event) {
console.log(`[${event.currentTarget.id}] target: ${event.target.id}, currentTarget: ${event.currentTarget.id}`);
}
elem1.addEventListener("dragstart", logEvent, false);
elem2.addEventListener("dragstart", logEvent, false);
elem3.addEventListener("dragstart", logEvent, false);拖拽 elem3 时输出：
[elem3] target: elem3, currentTarget: elem3 [elem2] target: elem3, currentTarget: elem2 [elem1] target: elem3, currentTarget: elem1
可见 elem2 处理器收到的是 target === elem3，此时若无条件调用 preventDefault()，即错误地阻断了本不属于它的拖拽操作。
✅ 总结
- preventDefault() 的作用是取消浏览器对本次事件的全局默认响应，与事件传播路径上的任意节点调用均相关；
- 对嵌套可拖拽元素，切勿在父监听器中无条件调用 preventDefault()；
- 应始终通过 event.target === this 或 event.target === elementRef 显式校验事件源；
- 理解 target（触发源）与 currentTarget（监听器绑定处）的区别，是编写健壮事件处理逻辑的基础。
遵循这一原则，即可在保持 DOM 结构灵活性的同时，精确控制各层级元素的交互行为。
