PointerEvent: getCoalescedEvents() 方法

安全上下文： 此功能仅在安全上下文 (HTTPS) 中可用，在部分或全部支持的浏览器中可用。

PointerEvent 接口的 getCoalescedEvents() 方法返回一系列 PointerEvent 实例，这些实例已合并 (合并) 为单个 pointermove 或 pointerrawupdate 事件。 用户代理会将多个更新合并到一个事件中，而不是多个 pointermove 事件流。 这有助于提高性能，因为用户代理需要处理的事件更少，但跟踪的粒度和准确性会降低，尤其是在快速且大幅度移动的情况下。

getCoalescedEvents() 方法允许应用程序访问所有未合并的位置更改，以便在必要时对指针移动数据进行精确处理。 未合并的位置更改在绘图应用程序中很有用，例如，访问所有事件有助于构建更平滑的曲线，更能匹配指针的移动。

有关合并事件的说明，请参见 规范中的图 7。

语法

js
getCoalescedEvents()

参数

无。

返回值

一系列 PointerEvent 实例。

示例

HTML

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

JavaScript

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

结果

规范

规范
指针事件
# dom-pointerevent-getcoalescedevents

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。