设置stopPropagation与事件捕获后，子div仍显示被拖拽的原因

核心真相：拖拽视觉反馈和事件传播是两回事 #

当你拖拽设置了draggable="true"的元素时，浏览器的半透明拖拽跟随效果是在事件触发前就启动的原生行为，和DOM事件的捕获/冒泡流程完全独立：

• 你按住div2拖动的瞬间，浏览器先识别到拖拽的触发目标是div2，直接生成对应的半透明拖拽镜像
• 之后才进入dragstart事件的传播流程，这时候父元素div1在捕获阶段拦截并阻止了事件传播，导致div2的dragstart处理器没执行，但已经生成的视觉反馈不会被撤回

事件传播的作用边界 #

event.stopPropagation()只能管住DOM事件在节点间的传递，管不了浏览器已经启动的原生拖拽行为。你代码里的日志已经证明div2的dragstart确实没触发，但拖拽视觉是事件流程之外的浏览器默认操作，不受事件传播控制。

要彻底阻止拖拽效果？试试这个 #

如果想连拖拽的视觉效果一起禁用，在div1的事件处理器里加上event.preventDefault()就行，它会直接取消浏览器的原生拖拽行为：

function div1EventHandler(event) {
  console.log("taget: " + event.target.id);
  console.log("currentTarget: " + event.currentTarget.id);
  event.stopPropagation();
  event.preventDefault(); // 取消原生拖拽，视觉效果也会消失
}

内容的提问来源于stack exchange，提问作者Dante