Cách dùng các sự kiện con trỏ trong JavaScript

Tại sao chỉ quan tâm tới đầu vào chuột và màn hình cảm ứng? Thực tế, bạn có thể xử lý cả hai cùng lúc bằng các pointer event - sự kiện con trỏ.

Nhiều ứng dụng web cho rằng thiết bị trỏ của người dùng sẽ là một con chuột, vì thế, chúng sử dụng các sự kiện chuột để xử lý tương tác. Tuy nhiên, với sự gia tăng của các thiết bị màn hình cảm ứng, người dùng không cần chuột để tương tác với web. Do đó, việc cần thiết ở đây là hỗ trợ đa dạng các thiết bị đầu vào để có số lượng khán giả lớn nhất có thể.

JavaScript có một tiêu chuẩn mới hơn gọi là các sự kiện con trỏ. Nó xử lý cả hai tác vụ chuột và chạm cảm ứng, vì thế, bạn không phải lo nghĩ về việc triển khai riêng từng tác vụ.

Pointer event là gì?

Pointer event - Sự kiện con trỏ là một chuẩn web xác định cách thống nhất để xử lý các phương thức nhập khác nhau trong trình duyệt web, bao gồm chuột, cảm ứng và bút. Những sự kiện này cung cấp cách tương tác nhất quán và độc lập với nền tảng chứa nội dung web trên các thiết bị khác nhau.

Tóm lại, các sự kiện con trỏ giúp bạn xử lý nhóm tương tác người dùng ở mọi nguồn.

Các kiểu sự kiện con trỏ

Sự kiện con trỏ được đặt tên tương tự như sự kiện chuột mà bạn có thể đã từng làm quen. Đối với mỗi mouseEvent trong JavaScript, bạn có một pointerEvent tương ứng. Điều đó có nghĩa bạn có thể xem lại code cũ và chuyển “mouse” sang “pointer” để bắt đầu hỗ trợ đầu vào cảm ứng và dùng bút.

Bảng sau hiện các sự kiện con trỏ khác nhau so với sự kiện dùng chuột:

Bạn có thể thấy rằng có thêm 3 sự kiện con trỏ mà không có sự kiện chuột tương ứng. Bạn sẽ tìm hiểu thêm về những sự kiện này sau đó.

Dùng sự kiện con trỏ trong JavaScript

Bạn có thể dùng các sự kiện con trỏ theo cùng cách dùng sự kiện chuột. Giống như hầu hết việc xử lý sự kiện, quá trình này thường theo quy trình mẫu sau:

1. Dùng bộ chọn DOM để tìm nạp một thành phần.
2. Dùng phương thức addEventListener, xác định sự kiện đang quan tâm và một hàm callback.
3. Dùng các thuộc tính và các phương thức của đối số callback, một đối tượng Event.

Ví dụ cách dùng sự kiện pointermove như sau:

// Nhận thành phần mục tiêu
const target = document.getElementById('target');

// Thêm một trình nghe sự kiện vào thành phần mục tiêu
target.addEventListener('pointermove', handlePointerMove);

// Hàm để xử lý sự kiện di chuyển con trỏ
function handlePointerMove(ev) {
    // Xử lý sự kiện theo cách bạn muốn
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Khối code này xác định một phần tử mục tiêu và một hàm JavaScript để xử lý sự kiện pointermove, sau đó, nó dùng một trình nghe sự kiện JavaScript để gắn sự kiện con trỏ và hàm vào thành phần mục tiêu.

Dùng code này, một phần tử với ID “target” sẽ hiện các tọa độ con trỏ khi bạn di chuyển con trỏ, ngón tay hoặc chạm bút trên nó.

Bạn có thể dùng các sự kiện con trỏ khác theo cùng cách này.

Sự kiện pointercancel

Sự kiện pointercancel được kích hoạt khi sự kiện con trỏ bị gián đoạn trước khi nó hoàn thành hoạt động như dự kiến ban đầu. Bình thường, trình duyệt này hủy bất kỳ sự kiện con trỏ có thể đã được thực thi trước đó. Hiện có nhiều lí do tại sao pointercancel có thể kích hoạt, ví dụ:

• Khi người dùng nhận cuộc gọi hoặc thông báo gián đoạn khác trong khi kéo một phần tử trên màn hình.
• Khi nhận thay đổi hướng thiết bị.
• Khi cửa sổ trình duyệt mất tập trung.
• Khi người dùng chuyển sang tab hoặc ứng dụng khác.

Với sự kiện pointercancel, bạn có thể xử lý những tình huống này theo cách mong muốn. Ví dụ:

const target = document.getElementById('target');

target.addEventListener('pointercancel', (event) => {
    // Xử lý tình huống tại nơi hủy con trỏ. Ví dụ, bạn có thể kích hoạt ghi hình chuột.
    target.releasePointerCapture(event.pointerId);
});

Ghi hình con trỏ

Ghi hình con trỏ là tính năng cho phép một thành phần HTML cụ thể chụp và phản hồi tất cả sự kiện con trỏ cho một con trỏ cụ thể, ngay cả khi những sự kiện đó xảy ra bên ngoài ranh giới của phần tử đó.

Bạn có thể thiết lập tính năng ghi hình con trỏ cho một phần tử bằng phương thức setpointercapture() và kích hoạt nó bằng releasepointercapture().

Các sự kiện con trỏ gotpointercapture và lostpointercapture hữu ích trong việc ghi hình con trỏ.

Sự kiện gotpointercapture

Sự kiện gotpointercapture được kích hoạt bất cứ khi nào một phần tử thu được con trỏ. Bạn có thể dùng sự kiện này để khởi tạo một trạng thái cho thành phần HTML để xử lý các sự kiện con trỏ. Ví dụ, trong một ứng dụng vẽ tranh, bạn có thể dùng sự kiện gotpointercapture để thiết lập vị trí ban đầu của con trỏ.

Sự kiện lostpointercapture

Sự kiện lostpointercapture được kích hoạt khi một thành phần mất khả năng chụp con trỏ. Bạn có thể dùng nó để dọn dẹp hoặc loại bỏ bất kỳ trạng thái đã tạo khi thành phần đó đạt được việc quay con trỏ. Trong ứng dụng vẽ tranh, bạn có thể muốn dùng phương thức này để ẩn con trỏ.

Hi vọng bài viết hữu ích với các bạn.