setPointerCapture 仅适用于pointerDown 事件吗?

wee*_*Tea 5 javascript events pointer-events

MDN说:

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

如果我调用回调:示例,它会按预期工作setPointerCapture-pointerDown在这里您可以按照您想要的速度拖动黄色方块,它将跟随光标直到pointerUp事件发生。

但是,如果尝试在回调中捕获目标,pointerMove它将无法按我的预期工作:示例- 黄色方块跟随光标,直到光标悬停在方块上。如果你移动鼠标太快,方块就会停止。

如何解释这种行为?我是否误解了文档?

Kai*_*ido 8

不完全是。

规格要求

指针必须处于活动按钮状态才能使此方法有效,否则它会默默地失败。

处于活动按钮状态意味着:

当指针的 Buttons 属性值非零时的情况。对于鼠标,这是指设备至少按下一个按钮。对于触摸,这是指与数字转换器进行物理接触。对于笔来说,这是指笔与数字转换器进行物理接触,或者在悬停时至少按下一个按钮。

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

您的代码的问题在于,它不会检查捕获是否有效,而是captured无条件地引发标志。检查 来代替此标志element.hasPointerCapture(e.pointerId)。