PointerEvent: getCoalescedEvents() 方法

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文： 此功能僅在安全上下文（HTTPS）中可用，且支援此功能的瀏覽器數量有限。

PointerEvent 介面的 getCoalescedEvents() 方法返回一個 PointerEvent 例項序列，這些例項被合併（coalesced）成單個 pointermove 或 pointerrawupdate 事件。使用者代理會將多個更新合併成一個事件，而不是產生一個大量的 pointermove 事件流。這有助於提高效能，因為使用者代理需要處理的事件更少，但跟蹤的精細度和準確性會降低，尤其是在快速大幅度移動時。

getCoalescedEvents() 方法允許應用程式訪問所有未合併的位置更改，以便在必要時精確處理指標移動資料。例如，在繪圖應用程式中，未合併的位置更改是可取的，因為可以訪問所有事件有助於構建更平滑的曲線，更好地匹配指標的移動。

有關合並事件的說明，請參閱規範中的圖 7。

語法

getCoalescedEvents()

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