🔍 问题：为什么鼠标按住时经过子元素，子元素的 mousemove 事件没有触发？

---

🧠 根本原因：

✅ 因为父元素调用了 setPointerCapture(event.pointerId)，导致指针事件（包括 mousemove）被“捕获”并强制路由到父元素，不再正常冒泡或触发子元素的事件监听器。

即使鼠标移动到了子元素上，子元素的 mousemove 事件也不会被触发，因为此时指针已经被父元素“独占控制”。

---

🧩 逐层分析代码逻辑：

1. 用户在 #parent 上按下鼠标（pointerdown）

   • 触发父元素的 pointerdown 事件

   • 调用 parent.setPointerCapture(event.pointerId)

     • 🔒 此操作将当前指针（如鼠标）的后续所有事件都“捕获”给 parent 元素

     • 即使鼠标移出 parent 或进入其子元素，事件依然只发送给 parent

2. 移动鼠标，穿过 #child 子元素

   • 浏览器本应触发 child 上的 mousemove

   • ❌ 但由于指针已被 parent 捕获：

     • 所有指针相关事件（包括作用于子元素的）都会：

       • 被定向到 parent

       • 不再正常派发给 child

   • 因此 child 的 mousemove 永远不会执行

3. 释放鼠标（pointerup）

   • parent.releasePointerCapture() 被调用

   • 指针控制权释放

   • 此后事件恢复正常的捕获/冒泡流程

---

⚠️ 特别注意：

你监听的是 child 的 mousemove，但父元素捕获的是 pointer 系列事件。

虽然 mousemove 是鼠标事件（Mouse Events），而 pointerdown/move/up 是指针事件（Pointer Events），但在现代浏览器中：

🔄 pointerdown 和 pointerup 等会捕获整个指针输入流，影响所有后续的指针事件和部分兼容性鼠标事件的行为，尤其是在设置了 setPointerCapture 的情况下。

尽管 mousemove 是单独的事件类型，但 setPointerCapture 改变了事件目标的路由机制，会导致：

• 子元素无法接收到某些输入事件（特别是与捕获指针对应的）

• 或者事件虽发生但不会触发预期行为（如 mouseover、mousemove 不触发）

更准确地说：当你对一个元素调用 setPointerCapture，该指针 ID 的所有事件（pointermove, pointerup 等）都被重定向到该元素，而且事件的命中测试（hit test）被忽略，直接发送过去。这打破了默认的事件目标判定流程。

所以，child 上的 mousemove 看似独立，其实它的触发依赖于“鼠标是否真正悬停在子元素上并能正确派发”，而这被 setPointerCapture 扰乱了。

---

✅ 解决方案建议（如需子元素也能响应）：

如果你确实需要子元素也能响应移动事件，可以：

方法 1：在父元素监听 pointermove 并手动判断是否在子元素上

const onPointerMove = (event) => {
    console.log('Pointer is moving over the parent');

    // 手动检查当前指针位置是否在 child 上
    const rect = child.getBoundingClientRect();
    if (
        event.clientX >= rect.left &&
        event.clientX <= rect.right &&
        event.clientY >= rect.top &&
        event.clientY <= rect.bottom
    ) {
        console.log('Pointer is actually over the child');
        // 执行你想在 child 上做的逻辑
    }
};

方法 2：避免使用 setPointerCapture（如果不需要精确追踪拖拽离开边界的情况）

---

📚 总结成记忆点（口诀式 ✅）

“一捕获，就独占；指针归我，别人靠边！”

🔹 记忆点总结（6句话记牢）：

1. setPointerCapture 一调用，指针就被“锁”住；

2. 后续所有指针事件，强制发给捕获元素；

3. 不管鼠标跑到哪（哪怕进子元素），事件都不正常派发；

4. 子元素的 mousemove、pointermove 可能直接被屏蔽；

5. 捕获期间，DOM 的正常事件目标判定（hit testing）被绕过；

6. 要想恢复正常，必须调用 releasePointerCapture。

🎯 一句话总结：

setPointerCapture 让父元素“霸占”鼠标输入流，子元素的事件因此“静默失效”——不是没发生，而是被劫持了。

---

🔖 实际开发提示：

• 多用于实现 拖拽（drag-and-drop）、滑块、绘图等场景

• 一定要记得在 pointerup 或 pointercancel 时 释放捕获

• 若需子元素响应行为，不要依赖其独立事件，应由父元素统一处理并判断位置

✅ 掌握这个机制，就能避免“鼠标明明在动，为啥没反应？”的坑！