事件委托通过在父容器监听pointerdown等事件并结合位移、时间阈值及目标元素判断点击或拖拽意图，实现子项点击与拖拽排序互不干扰。
事件委托本身不直接处理拖拽排序中的子项点击，而是帮你区分点击和拖拽意图——关键在于：在父容器上监听 mousedown（或 pointerdown），结合鼠标移动距离、时间阈值和目标元素判断是否触发点击，还是进入拖拽流程。
用 mousedown + mousemove 判断是否为有效点击
拖拽通常由按下后移动触发，而点击是按下后快速抬起、位移很小。可在父容器上统一监听，避免给每个子项绑定事件：
- 记录
mousedown时的坐标、时间、目标元素（如target.dataset.sortId） - 在
mousemove中计算位移，一旦超过阈值（如 4px），标记“已拖拽”，后续忽略该次点击 - 在
mouseup时检查是否“未拖拽”且目标仍为可点击子项，再执行点击逻辑（如跳转、编辑）
给可拖拽子项加 data 属性明确角色
避免误判操作对象。例如：
<div class="list">
<div class="item" data-sort-id="1">
<span class="handle">☰</span>
<span class="content">标题</span>
</div>
</div>
这样你可以在 mousedown 时检查 e.target.classList.contains('handle') 或 e.target.closest('.handle')，只对拖拽手柄启动拖拽；而点击 .content 就直接走点击逻辑，互不干扰。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
用 pointer 事件替代 mouse 更可靠（推荐）
移动端和触控笔需兼容，pointerdown/pointermove/pointerup 是更现代、统一的选择：
- 自动合并 mouse/touch/pen 事件，无需重复逻辑
- 支持
isPrimary和pressure等扩展判断 - 注意调用
e.preventDefault()在pointerdown仅当确认要拖拽时才执行，否则会阻止文本选择等默认行为
防冒泡 + 精确目标检测是关键细节
子项内可能有按钮、复选框等交互元素，它们的点击不应被拖拽拦截：
- 在
pointerdown中用e.target.matches('button, input[type="checkbox"], a')快速放行 - 对非交互元素（如文字、空白区域）才启用拖拽判定
- 必要时在子项点击事件里
e.stopPropagation()，防止事件冒泡到父容器触发误拖拽
不复杂但容易忽略：拖拽排序的点击处理，本质是意图识别问题。把“按下—移动—抬起”拆解清楚，用数据标记状态，再配合语义化 DOM 结构，就能让点击和拖拽各司其职。
