PointerEvent: Methode getCoalescedEvents()

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur insicheren Kontexten (HTTPS) in einigen oder allenunterstützenden Browsern verfügbar.

DiegetCoalescedEvents()-Methode derPointerEvent-Schnittstelle gibt eine Sequenz vonPointerEvent-Instanzen zurück, die zu einem einzelnenpointermove oderpointerrawupdate-Ereignis zusammengefasst (koalesziert) wurden.Anstatt eines kontinuierlichen Stroms von vielenpointermove-Ereignissen fassen Benutzeragenten mehrere Aktualisierungen zu einem einzigen Ereignis zusammen.Dies hilft bei der Leistung, da der Benutzeragent weniger Ereignisbearbeitung durchführen muss, aber es gibt eine Verringerung der Granularität und Genauigkeit beim Tracking, insbesondere bei schnellen und großen Bewegungen.

DiegetCoalescedEvents()-Methode ermöglicht es Anwendungen, auf alle nicht zusammengefassten Positionsänderungen zuzugreifen, um eine präzise Behandlung der Zeigerbewegungsdaten dort zu ermöglichen, wo es notwendig ist.Nicht zusammengefasste Positionsänderungen sind in Zeichenanwendungen wünschenswert, da der Zugriff auf alle Ereignisse hilft, glattere Kurven zu erzeugen, die besser der Zeigerbewegung entsprechen.

Eine Darstellung der koaleszierten Ereignisse finden Sie inAbbildung 7 in der Spezifikation.

Syntax

getCoalescedEvents()

<canvas 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");  }});