preventDefault() 的调用会全局取消浏览器对当前事件类型的默认行为（如拖拽），且该取消效果不依赖于事件监听器绑定在哪个元素上——只要在事件传播路径中任一节点上调用，整个事件的默认行为即被禁用。
`preventdefault()` 的调用会全局取消浏览器对当前事件类型的默认行为（如拖拽），且该取消效果不依赖于事件监听器绑定在哪个元素上——只要在事件传播路径中任一节点上调用，整个事件的默认行为即被禁用。
在 Web 开发中，preventDefault() 常被误认为“仅影响当前元素”，但其实际行为远比表面更关键：它不是局部阻止，而是全局抑制浏览器对该事件类型的默认响应。以 dragstart 为例，浏览器是否启动拖拽操作，并非在事件触发的瞬间决定，而是在整条事件传播（capture → target → bubble）结束后，统一检查：在整个传播过程中，是否有任意监听器调用了 event.preventDefault()？ 若有，则整个拖拽流程被彻底取消——无论目标元素本身是否绑定了 handler、是否显式调用了 preventDefault()。
这正是问题中 elem3 无法拖拽的根本原因：当 elem3 被拖拽时，dragstart 事件按冒泡顺序依次触发 elem3 → elem2 → elem1；虽然 elem2 的 handler 中调用了 event.preventDefault()，但它并非作用于 elem2 自身的拖拽逻辑，而是向浏览器声明：“本次 dragstart 事件的默认行为（启动拖拽）应被禁止”。因此，即使 elem3 的 handler 中什么也没做，整个拖拽动作仍被拦截。
✅ 正确做法：精准限制 preventDefault() 的作用范围
要实现“只禁用 elem2 的拖拽，但允许 elem3 正常拖拽”，必须确保 preventDefault() 仅在事件真正源自 elem2 时才执行。核心判断依据是 event.target（事件最初触发的元素）与当前监听器绑定元素（event.currentTarget 或 this）是否一致：
const elem2 = document.getElementById("elem2");
elem2.addEventListener("dragstart", function(event) {
// 仅当用户直接拖拽 elem2 时才取消默认行为
if (event.target === this) {
event.preventDefault();
}
});或使用箭头函数配合显式引用（推荐语义清晰）：
const elem2 = document.getElementById("elem2");
elem2.addEventListener("dragstart", (event) => {
if (event.target.id === "elem2") {
event.preventDefault();
}
});? 关键辨析：
- event.target：事件起始源元素（如用户鼠标按下并拖动的是 elem3，则 target 永远是 elem3）；
- event.currentTarget：当前正在执行 handler 的监听器所绑定的元素（此处为 elem2）；
因此 event.target === event.currentTarget 是判断“事件是否直接发生在此元素上”的可靠方式。
⚠️ 注意事项与最佳实践
- stopPropagation() 无法替代 preventDefault()：前者仅控制事件是否继续传播，不影响浏览器默认行为；后者才决定是否取消拖拽、表单提交、链接跳转等原生动作。
- 事件类型差异需留意：并非所有事件都支持 preventDefault()（如 load、error），且部分事件（如 focus）默认不冒泡，需结合 MDN 文档确认行为。
- 性能与可维护性建议：避免在父级监听器中无条件调用 preventDefault()；始终通过 target 校验确保意图明确，既提升代码健壮性，也便于后续调试与协作。
- 现代替代方案考虑：若需精细控制拖拽行为，可结合 DataTransfer API 与 dragover/drop 事件构建自定义拖放逻辑，绕过原生 draggable 的限制。
总之，preventDefault() 是一个“全有或全无”的开关——它的效力覆盖整个事件实例，而非某个 DOM 节点。理解这一机制，是写出可控、可预测交互逻辑的关键前提。
