当为嵌套的 draggable="true" 元素绑定 dragstart 事件并调用 stopPropagation() 时，子元素仍会被拖动——这是因为拖拽行为由浏览器默认动作触发，而非事件冒泡/捕获流程决定；需调用 event.preventDefault() 才能真正禁用该行为。
当为嵌套的 `draggable="true"` 元素绑定 `dragstart` 事件并调用 `stoppropagation()` 时，子元素仍会被拖动——这是因为拖拽行为由浏览器默认动作触发，而非事件冒泡/捕获流程决定；需调用 `event.preventdefault()` 才能真正禁用该行为。
在 Web 开发中，draggable 属性虽简单易用，但其底层机制常被误解。一个常见误区是：认为 stopPropagation() 能阻止子元素被拖动。实际上，stopPropagation() 仅控制事件在 DOM 树中的传播路径（如捕获或冒泡阶段是否继续传递），它完全不影响浏览器已触发的默认拖拽行为。
拖拽操作的启动（即鼠标按下后元素进入“被拖动”状态）本质上是浏览器对 draggable="true" 元素的原生响应。一旦用户开始拖拽，浏览器会立即启用默认拖拽 UI（包括光标变化、半透明拖影等），这个过程独立于 JavaScript 事件流。因此，即使你在父元素的 dragstart 处理函数中调用 event.stopPropagation()，子元素 div2 依然会参与拖拽——因为它的 draggable="true" 属性已被解析，且父元素的 dragstart 事件本身（在捕获阶段）已成功触发，此时默认行为早已启动。
✅ 正确解法是使用 event.preventDefault()：
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
// 捕获阶段监听 dragstart
div1.addEventListener("dragstart", (event) => {
console.log("target:", event.target.id);
console.log("currentTarget:", event.currentTarget.id);
event.preventDefault(); // ✅ 关键：阻止浏览器默认拖拽行为
}, true);
div2.addEventListener("dragstart", (event) => {
console.log("target:", event.target.id);
console.log("currentTarget:", event.currentTarget.id);
}, true);? 补充说明：preventDefault() 必须在 dragstart 事件处理函数中同步调用（不能异步延迟），且需确保该 handler 确实被执行（例如监听在正确的元素和阶段）。若目标是仅允许 div1 可拖拽，而 div2 完全不可拖拽，更健壮的做法是移除 div2 的 draggable="true" 属性，或通过 CSS user-select: none + pointer-events: none 辅助禁用交互——但核心仍需 preventDefault() 防止默认行为。
⚠️ 注意事项：
- stopPropagation() 和 preventDefault() 作用完全不同：前者管“事件传不传”，后者管“浏览器做不做默认事”；
- 在捕获阶段（useCapture = true）调用 preventDefault() 同样有效，无需等到冒泡阶段；
- 若同时存在多个 dragstart 监听器，任一调用了 preventDefault()，都将取消整个拖拽流程；
- 测试时请确保使用真实鼠标拖拽（而非仅触发事件），因为 preventDefault() 影响的是用户交互产生的默认行为。
总结：控制可拖拽行为的关键不在事件流控制，而在显式干预浏览器默认动作。牢记——dragstart 是通知时机，preventDefault() 才是决策开关。
