问题
MDN says:
The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released.
And it works as expected if I call setPointerCapture in pointerDown callback: example - here you can drag yellow square as fast as you want and it will follow the cursor until pointerUp event happens.
But if try to capture target in pointerMove callback it won't work as I expected: example - yellow square follows the cursor until cursor hovers the square. If you move your mouse too fast square will stopped.
How this behavior can be explained? Did i misunderstand the documentation?
回答1:
Not exactly.
The specs ask that
The pointer MUST be in its active buttons state for this method to be effective, otherwise it fails silently.
To be in its active buttons state means:
The condition when a pointer has a non-zero value for the buttons property. For mouse, this is when the device has at least one button depressed. For touch, this is when there is physical contact with the digitizer. For pen, this is when either the pen has physical contact with the digitizer, or at least one button is depressed while hovering.
So if your pointer device is in this state when you first move it over your element, or from any other event for that matter, it should work, until you release your pointer device.
However note that for your code to work in Firefox you need to preventDefault() the pointerdown event. But from Chrome, with a mouse device, you can start by dragging outside of the element, then move over it and the capture will work as intended.
The problem with your code is that it doesn't check if the capture did work, raising the captured flag unconditionally. Instead of this flag, check for element.hasPointerCapture(e.pointerId).
来源：https://stackoverflow.com/questions/62807804/does-setpointercapture-works-only-for-pointerdown-event