在处理嵌套可拖拽元素时，常遇到子元素拖拽却连带父元素移动的问题。根本原因在于dragstart 事件存在冒泡机制。许多开发者倾向于直接禁用父元素拖拽，但这种方法过于粗糙。更优的解决方案是精准控制事件传播路径，而不是简单禁止。
子元素拖拽为何会连带激活父容器？
HTML5 拖拽 API 中，dragstart 事件遵循标准 DOM 事件流，首先在子元素上触发（目标阶段），随后向上冒泡至父级乃至更外层元素。一旦父容器也绑定了 dragstart 监听，它同样会接收到该事件——即便用户仅拖拽了子元素中的红色方块，蓝色父容器也会触发自身的拖拽逻辑（如添加 dragging 类、修改样式或移动位置）。这正是子元素拖拽连带激活父容器的底层原理。
核心解决方案：在子元素的 dragstart 事件中调用 stopPropagation()
此方法并非禁止所有事件，而是仅将事件停留在子元素层级，不再向上传播。实现步骤简单，但需要注意正确的调用位置：
- 仅在子元素的 dragstart 事件处理函数中调用
e.stopPropagation() - 父元素的 dragstart 处理逻辑保持不变，无需任何调整
- 如果使用了
e.dataTransfer.setData()，建议将stopPropagation()置于其后（顺序不影响功能，但逻辑更清晰）
以下为示例代码片段：
innerElement.addEventListener('dragstart', (e) => { e.stopPropagation(); // ✅ 关键一行，放这里 e.dataTransfer.setData('text/plain', 'inner-item'); innerElement.classList.add('dragging');});
补充建议：防止误触发并提升交互体验
仅使用 stopPropagation() 虽能解决事件冒泡，但在实际项目中还需注意以下几点：
- 仅对需要拖拽的元素设置 draggable 属性：若父容器无需拖动，则不添加
draggable="true"，从根源上减少误触发 - 视觉反馈应层级明确：子元素拖拽时，仅对子元素施加半透明或边框样式变化；父容器不应产生任何状态响应
- 移动端需要单独适配：HTML5 原生拖拽 API 不支持触摸事件，因此在嵌套结构下，应使用 touchstart、touchmove、touchend 配合 CSS transform 进行模拟，无法依赖 stopPropagation
