Pointer Events 合并与预测：getCoalescedEvents 与 getPredictedEvents

---

title: Pointer Events 合并与预测：getCoalescedEvents 与 getPredictedEvents

keywords:

• getCoalescedEvents
• getPredictedEvents
• 高频输入
• 绘图优化
• 触控体验

description: 使用合并与预测事件在高频输入场景提升绘图与交互表现，降低事件处理开销，并提供兼容与降级策略。

categories:

• 应用软件
• 视频软件

---

概述

在高频输入中浏览器可能合并事件以减少开销。getCoalescedEvents 返回合并的事件队列；getPredictedEvents 提供短期预测轨迹以提升跟随性。

用法/示例

canvas.addEventListener('pointermove', e => {
  const events = e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
  for (const ev of events) draw(ev.clientX, ev.clientY)
})

工程建议

• 在绘图与拖拽中使用合并事件处理，降低开销；在不支持环境直接处理当前事件。
• 预测事件需谨慎使用，验证设备与浏览器支持并提供关闭选项。
• 与帧循环与节流协作，避免过度处理导致卡顿。

参考与验证

• MDN：Pointer events — https://developer.mozilla.org/docs/Web/API/Pointer_events