4

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?

weeklyTea
  • 316
  • 2
  • 10
  • You need to add the event listener to document to prevent it from stopping if you move the mouse too quickly. – Bren Jul 09 '20 at 05:21

2 Answers2

7

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).

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    Too bad it requires a button the mouse to be active. Would be slick to have been able to hold down a keyboard key to be considered "active" or simply remove this requirement – Pyrolistical May 31 '22 at 04:22
0

Maybe what you want is the 'pointer lock' api - much more flexible. Used for games and other situations where the screen position of the mouse and its icon are irrelevant.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

from that page:

Pointer lock is different from mouse capture in the following ways:

  • It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.

  • It is not limited by browser or screen boundaries.

  • It continues to send events regardless of mouse button state.

  • It hides the cursor.

Apparently, Capture is more for regular operation: you make a slider, and you ensure that the user's drag isn't interrupted if the mouse strays away from the gutter line.

OsamaBinLogin
  • 609
  • 6
  • 10