PointerEvent: метод getCoalescedEvents()

Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS), в некоторых или во всех поддерживающих браузерах.

Метод getCoalescedEvents() интерфейса PointerEvent возвращает последовательность PointerEvent экземпляров, которые были объединены (слиты) в один pointermove или pointerrawupdate событие. Вместо потока множества pointermove событий, пользовательские агенты объединяют несколько обновлений в одно событие. Это помогает производительности, так как пользовательский агент выполняет меньше обработки событий, но происходит снижение точности при отслеживании, особенно при быстрых и больших перемещениях.

Метод getCoalescedEvents() позволяет приложениям получить доступ ко всем не объединённым изменениям позиции для точной обработки данных перемещения указателя в необходимых случаях. Необъединённые изменения позиции желательны в приложениях рисования, например, где доступ ко всем событиям помогает создавать более плавные кривые, которые лучше соответствуют движению указателя.

Для иллюстрации объединённых событий см. Рисунок 7 в спецификации.

Синтаксис

getCoalescedEvents()

Параметры

Нет.

Возвращаемое значение

Последовательность экземпляров PointerEvent.

Пример

HTML

<canvas id="target" width="600" height="300"></canvas>

JavaScript

const canvas = document.getElementById("target");
const ctx = canvas.getContext("2d");

const pointerEvents = [];

function drawCircle(x, y, color) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // draw the last 20 events
  if (pointerEvents.length > 20) {
    pointerEvents.shift();
  }
  pointerEvents.push({ x, y, color });

  for (const pointerEvent of pointerEvents) {
    ctx.beginPath();
    ctx.arc(pointerEvent.x, pointerEvent.y, 10, 0, 2 * Math.PI);
    ctx.strokeStyle = pointerEvent.color;
    ctx.stroke();
  }
}

canvas.addEventListener("pointermove", (e) => {
  // draw a circle for the current event
  drawCircle(e.clientX, e.clientY, "black");

  const coalescedEvents = e.getCoalescedEvents();
  for (let coalescedEvent of coalescedEvents) {
    // give it an offset so we can see the difference and color it red
    drawCircle(coalescedEvent.clientX + 20, coalescedEvent.clientY + 20, "red");
  }
});

Результат

Спецификации

Спецификация
Pointer Events # dom-pointerevent-getcoalescedevents

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getCoalescedEvents`	58	79	59	45	18.2	58	79 Метод всегда возвращает пустой массив, независимо от действий пользователя.	43	18.2	7.0	58

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents