Pointer events

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Some parts of this feature may have varying levels of support.

Hầu hết nội dung web ngày nay giả định thiết bị trỏ của người dùng là chuột. Tuy nhiên, vì nhiều thiết bị hỗ trợ các loại thiết bị trỏ khác như bút/bút cảm ứng và màn hình cảm ứng, cần thiết phải mở rộng các mô hình sự kiện trỏ hiện có. Pointer events giải quyết nhu cầu đó.

Sự kiện con trỏ là các sự kiện DOM được kích hoạt cho thiết bị trỏ. Chúng được thiết kế để tạo ra mô hình xử lý sự kiện đơn nhất cho chuột, bút/bút cảm ứng và cảm ứng đơn. Con trỏ là bất kỳ điểm tiếp xúc nào trên màn hình được tạo ra bởi thiết bị trỏ. Có thể trỏ là thiết bị chỉ điểm như chuột, bút/bút cảm ứng hoặc điểm chạm trên màn hình cảm ứng.

Khái niệm và cách sử dụng

API Pointer Events là một siêu tập của Mouse Events, nghĩa là code chỉ xử lý Mouse Events cũng sẽ hoạt động đúng với Pointer Events. Ngoài ra, Pointer Events cung cấp thêm thông tin cho các loại thiết bị trỏ khác.

Các sự kiện con trỏ rất giống với các sự kiện chuột, nhưng có thêm các thuộc tính như pointerId, pointerType, pressure, tiltX, tiltY, widthheight.

Giao diện PointerEvent

PointerEvent là giao diện sự kiện cơ bản cho tất cả sự kiện con trỏ.

Sự kiện

pointerover

Kích hoạt khi con trỏ đi vào vùng hit test của phần tử.

pointerenter

Kích hoạt khi con trỏ đi vào vùng hit test của phần tử hoặc một trong các phần tử con.

pointerdown

Kích hoạt khi con trỏ trở thành active.

pointermove

Kích hoạt khi con trỏ thay đổi tọa độ.

pointerrawupdate

Kích hoạt khi bất kỳ thuộc tính con trỏ nào thay đổi.

pointerup

Kích hoạt khi con trỏ không còn active.

pointercancel

Kích hoạt khi trình duyệt xác định rằng sẽ không có nhiều sự kiện con trỏ hơn.

pointerout

Kích hoạt khi con trỏ rời khỏi vùng hit test của phần tử.

pointerleave

Kích hoạt khi con trỏ rời khỏi vùng hit test của phần tử.

gotpointercapture

Kích hoạt khi phần tử nhận chụp con trỏ.

lostpointercapture

Kích hoạt khi chụp con trỏ được giải phóng.

Hướng dẫn

Thông số kỹ thuật

Specification
Pointer Events

Tương thích trình duyệt

Xem thêm