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