SetPointerCapture работает только для события pointerDown?

Question

MDN говорит:

Метод setPointerCapture () интерфейса Element используется для обозначения определенного элемента c в качестве цели захвата будущих событий указателя. Последующие события для указателя будут нацелены на элемент захвата , пока захват не будет выпущен .

И он будет работать, как ожидалось, если я вызываю setPointerCapture в pointerDown обратном вызове: пример - здесь вы можете перетаскивать желтый квадрат так быстро, как хотите, и он будет следовать за курсором, пока не произойдет событие pointerUp.

Но если попытаться захватить цель в обратном вызове pointerMove, он выиграл не работает, как я ожидал: пример - желтый квадрат следует за курсором, пока курсор не наведется на квадрат. Если вы переместите мышь слишком быстро, квадрат остановится.

Как можно объяснить такое поведение? Я неправильно понял документацию?

Answer 1

Не совсем.

Спецификации требуют, чтобы

Указатель ДОЛЖЕН находиться в активном состоянии кнопок, чтобы этот метод был эффективным, иначе он не сработает

Быть в состоянии активных кнопок означает:

Условие, когда указатель имеет ненулевое значение для свойства кнопок . Для мыши это когда на устройстве нажата хотя бы одна кнопка. Для прикосновения это физический контакт с дигитайзером. Для пера это когда либо перо физически контактирует с дигитайзером, либо при наведении курсора нажимается хотя бы одна кнопка.

Итак, если ваше указательное устройство находится в этом состоянии, когда вы впервые перемещаете его ваш элемент или любое другое событие, если на то пошло, он должен работать, пока вы не отпустите указатель. Однако обратите внимание, что для того, чтобы ваш код работал в Firefox, вам необходимо preventDefault() событие pointerdown . Но с Chrome с помощью устройства мыши вы можете начать с перетаскивания за пределы элемента, затем переместите его, и захват будет работать должным образом.

Проблема с вашим кодом в том, что он не проверьте, работает ли захват, безоговорочно поднимая флаг captured. Вместо этого флага проверьте element.hasPointerCapture(e.pointerId).