setPointerCapture 仅适用于pointerDown 事件吗?

2024-05-24

MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture says:

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

如果我打电话,它会按预期工作setPointerCapture in pointerDown打回来:example https://codesandbox.io/s/setpointercapture-onpointerdown-u09yc- 在这里你可以按照你想要的速度拖动黄色方块,它会跟随光标直到pointerUp事件发生。

但如果尝试捕获目标pointerMove回调它不会像我预期的那样工作:example https://codesandbox.io/s/setpointercapture-onpointermove-h655y- 黄色方块跟随光标,直到光标悬停在方块上。如果你移动鼠标太快,方块就会停止。

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


不完全是。

规格要求 https://www.w3.org/TR/pointerevents2/#dom-element-setpointercapture

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

将在其活动按钮状态 https://www.w3.org/TR/pointerevents2/#dfn-active-buttons-state means:

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

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

您的代码的问题在于它不会检查捕获是否有效,从而引发captured无条件标记。检查此标志而不是element.hasPointerCapture(e.pointerId) https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

setPointerCapture 仅适用于pointerDown 事件吗? 的相关文章

随机推荐