PointerEvent: getCoalescedEvents() method

Limited availability

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

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Phương thức getCoalescedEvents() của giao diện PointerEvent trả về một chuỗi các thực thể PointerEvent đã được gộp (kết hợp) vào một sự kiện pointermove hoặc pointerrawupdate duy nhất. Thay vì một luồng nhiều sự kiện pointermove, tác nhân người dùng gộp nhiều bản cập nhật vào một sự kiện duy nhất. Điều này giúp cải thiện hiệu suất vì tác nhân người dùng phải xử lý ít sự kiện hơn, nhưng có sự giảm độ chi tiết và độ chính xác khi theo dõi, đặc biệt với các chuyển động nhanh và lớn.

Phương thức getCoalescedEvents() cho phép ứng dụng truy cập tất cả các thay đổi vị trí chưa được gộp để xử lý chính xác dữ liệu chuyển động con trỏ khi cần thiết. Các thay đổi vị trí chưa được gộp phù hợp trong các ứng dụng vẽ, chẳng hạn, nơi việc truy cập tất cả các sự kiện giúp xây dựng các đường cong mượt mà hơn, phản ánh chuyển động của con trỏ tốt hơn.

Để xem minh họa về các sự kiện được gộp, hãy xem Hình 7 trong đặc tả.

Cú pháp

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