setPointerCapture 是不是仅适用于 pointerDown 事件？

Posted 2023-02-24

【中文标题】setPointerCapture 是不是仅适用于 pointerDown 事件？

【英文标题】：Does setPointerCapture works only for pointerDown event?setPointerCapture 是否仅适用于 pointerDown 事件？

【发布时间】：2020-07-09 05:08:29

【问题描述】：

MDN 说：

Element 接口的 setPointerCapture() 方法用于指定特定元素作为未来指针事件的捕获目标。指针的后续事件将针对捕获元素直到释放捕获。

如果我在pointerDown 回调中调用setPointerCapture，它会按预期工作：example - 在这里你可以随心所欲地拖动黄色方块，它会跟随光标直到pointerUp 事件发生。

但如果尝试在pointerMove 回调中捕获目标，它将无法按预期工作：example - 黄色方块跟随光标，直到光标悬停在方块上。如果您将鼠标移动得太快，方块将停止。

如何解释这种行为？我误解了文档吗？

【问题讨论】：

您需要将事件监听器添加到文档中，以防止鼠标移动过快而停止。

【参考方案1】：

不完全是。

The specs ask that

指针必须处于其活动按钮状态才能使此方法生效，否则它会静默失败。

加入its active buttons state 意味着：

当指针的按钮属性具有非零值时的条件。对于鼠标，这是指设备至少按下了一个按钮。对于触摸，这是与数字化仪进行物理接触的时候。对于笔，这是指笔与数字化仪发生物理接触，或者在悬停时至少按下一个按钮。

因此，如果您的指针设备在您第一次将其移到元素上时处于此状态，或者在任何其他事件中处于此状态，它应该工作，直到您释放指针设备。 但是请注意，要让您的代码在 Firefox 中运行，您需要 preventDefault() pointerdown 事件。但在 Chrome 中，使用鼠标设备，您可以先拖动元素外部，然后在其上移动，然后捕获将按预期进行。

您的代码的问题是它不检查捕获是否有效，无条件地提高captured 标志。而不是这个标志，检查element.hasPointerCapture(e.pointerId)。