Cách sử dụng sự kiện con trỏ trong JavaScript

Bài học chính

Để đảm bảo tính toàn diện và khả năng truy cập cho cơ sở người dùng rộng hơn, các ứng dụng web phải được thiết kế với các tùy chọn đầu vào đa dạng ngoài chuột truyền thống. Cách tiếp cận này cho phép khả năng thích ứng cao hơn với nhu cầu và sở thích cá nhân đồng thời thúc đẩy khả năng sử dụng phổ quát.

Việc sử dụng các sự kiện con trỏ trong JavaScript cho phép xử lý hiệu quả cả tương tác dựa trên chuột và dựa trên cảm ứng, từ đó loại bỏ yêu cầu về các quy trình triển khai riêng biệt cho từng loại sự kiện tương ứng.

Thiết kế của các sự kiện con trỏ trong quá trình phát triển web hiện đại phản ánh chặt chẽ các sự kiện chuột truyền thống, tạo điều kiện thuận lợi cho việc điều chỉnh mã nguồn có sẵn để phù hợp với cả màn hình cảm ứng và đầu vào bằng bút cảm ứng.

Sự phổ biến của công nghệ màn hình cảm ứng đã dẫn đến sự phụ thuộc ngày càng tăng vào đầu vào dựa trên ngón tay để tương tác kỹ thuật số. Do đó, điều quan trọng đối với các hoạt động phát triển web hiện đại là phải đáp ứng và tạo điều kiện thuận lợi cho các hình thức tương tác đa dạng của người dùng thông qua các thiết bị đầu vào khác nhau ngoài giao diện điều khiển bằng chuột truyền thống.

Việc sử dụng tiêu chuẩn gần đây hơn được gọi là Sự kiện con trỏ trong JavaScript cho phép tích hợp liền mạch cả đầu vào dựa trên chuột và cảm ứng, từ đó loại bỏ nhu cầu về các quy trình triển khai riêng biệt.

Sự kiện con trỏ là gì?

Các sự kiện con trỏ tạo thành một mô hình có thể áp dụng phổ biến để quản lý các phương thức đầu vào đa dạng trong bối cảnh duyệt web, bao gồm các giao diện dựa trên con trỏ truyền thống bên cạnh các lựa chọn thay thế hiện đại như màn hình cảm ứng và tương tác bằng bút cảm ứng. Cách tiếp cận gắn kết này đảm bảo giao tiếp liền mạch với nội dung dựa trên internet bất kể nền tảng phần cứng được sử dụng.

Về bản chất, các sự kiện con trỏ tạo điều kiện thuận lợi cho việc quản lý tập hợp các tương tác của người dùng, bất kể nguồn gốc của chúng.

Các loại sự kiện con trỏ

Các sự kiện con trỏ có tên tương tự như các sự kiện chuột mà bạn có thể đã biết. Tương ứng với mỗi sự kiện chuột trong JavaScript là sự kiện con trỏ tương ứng, cho phép chuyển đổi từ “chuột” sang “con trỏ” để hỗ trợ các thiết bị nhập liệu bằng cảm ứng và bút.

Biểu đồ được cung cấp minh họa sự so sánh song song của các sự kiện con trỏ khác nhau, tương phản với các sự kiện chuột tương ứng của chúng:

Sự kiện con trỏ

|

Sự kiện chuột

—|—

con trỏ xuống

|

Di chuột xuống

con trỏ lên

|

di chuột lên

di chuyển con trỏ

|

di chuột

con trỏ để lại

|

rời khỏi chuột

con trỏ

|

Di chuột lên trên

con trỏ nhập

|

máy di chuột

con trỏ

|

di chuột ra

con trỏ hủy

|

không có

gotpointercapture

|

không có

chụp con trỏ bị mất

|

không có

Rõ ràng là tồn tại ba sự kiện con trỏ bổ sung thiếu các sự kiện chuột tương ứng. Sự hiểu biết về những sự kiện như vậy sẽ được mô tả trong thời gian thích hợp.

Sử dụng sự kiện con trỏ trong JavaScript

Bạn có thể sử dụng các sự kiện con trỏ theo cách tương tự như các sự kiện chuột và quy trình công việc điển hình để xử lý các sự kiện đó thường tuân theo cấu trúc sau:

Sử dụng cơ chế truy vấn DOM để truy xuất một phần tử HTML cụ thể từ mô hình đối tượng tài liệu bằng cách chỉ định mã định danh hoặc thuộc tính duy nhất của nó trong mã HTML, cho phép thao tác và tương tác hiệu quả với phần tử đã chọn trong JavaScript hoặc các ngôn ngữ lập trình khác.

Bằng cách sử dụng phương thức addEventListener, người ta có thể chỉ định một sự kiện quan tâm và liên kết nó với một hàm sẽ được thực thi khi nó xuất hiện.

Sử dụng các thuộc tính và hàm của đối tượng sự kiện được truyền dưới dạng tham số cho hàm gọi lại, đại diện cho một lần xuất hiện kích hoạt phản ứng hoặc phản hồi trong mã.

Đây là một ví dụ sử dụng sự kiện di chuyển con trỏ:

 // Get the target element
const target = document.getElementById('target');

// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);

// Function to handle pointer move event
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Mã được cung cấp sẽ thiết lập một đối tượng được chỉ định trong DOM của nó, cùng với chức năng theo kịch bản trong JavaScript phản hồi sự kiện “pointermove”. Bằng cách sử dụng hàm JavaScript, mã này thêm trình xử lý sự kiện vào phần tử đích đã chỉ định để liên kết cả hành động dựa trên con trỏ và hàm liên quan với nhau.

Đoạn mã này cho phép hiển thị trực quan vị trí của thành phần được nhắm mục tiêu trên trang web bằng chuyển động của con trỏ trên nó thông qua con trỏ, ngón tay hoặc bút. Phần tử được đề cập được xác định thông qua mã định danh “mục tiêu” duy nhất của nó.

Theo cách tương tự, bạn có thể sử dụng các sự kiện con trỏ khác nhau cho mục đích đã định của mình.

Sự kiện hủy con trỏ

Sự kiện PointerCancel được kích hoạt khi một sự kiện con trỏ khác can thiệp và chấm dứt quá trình thực thi đang diễn ra của nó trước khi hoàn thành dự kiến. Thông thường, trình duyệt sẽ hủy bỏ mọi sự kiện con trỏ trước đó có thể đã diễn ra tại thời điểm bị gián đoạn. Nhiều yếu tố có thể dẫn đến việc kích hoạt sự kiện này, bao gồm nhưng không giới hạn ở:

Trong khi chủ động điều khiển thiết bị điện tử thông qua các tương tác dựa trên cảm ứng, chẳng hạn như kéo một phần tử trên màn hình, người dùng có thể gặp phải sự gián đoạn trong quy trình làm việc của họ do các cuộc gọi đến hoặc thông báo cần được chú ý ngay lập tức.

⭐Khi hướng thiết bị thay đổi.

⭐Khi cửa sổ trình duyệt bị mất tiêu điểm.

Khi người dùng chọn điều hướng khỏi giao diện hiện tại hoặc tương tác với một chương trình khác, điều này báo hiệu sự rời xa trọng tâm chú ý hiện tại của họ và cho biết sự thay đổi về mức độ ưu tiên.

Sự kiện pointercancel cung cấp một giải pháp linh hoạt để giải quyết các tình huống khác nhau theo cách phù hợp với yêu cầu cụ thể của bạn. Một ví dụ minh họa được cung cấp dưới đây:

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

target.addEventListener('pointercancel', (event) => {
    // Handle the situation where the pointer cancels. For example, you
    // can release the pointer capture
    target.releasePointerCapture(event.pointerId);
});

Chụp con trỏ

Việc thu thập con trỏ cho phép một phần tử HTML được chỉ định chặn và phản ứng với tất cả các tương tác dựa trên con trỏ hướng vào nó, bất kể chúng diễn ra trong hay ngoài ranh giới được phân định của nó.

Phương thức setPointerCapture() cho phép thu thập các con trỏ liên quan đến một phần tử cụ thể, trong khi phương thức releasePointerCapture() giải phóng mọi con trỏ đã bắt được liên kết với phần tử cụ thể đó.

Các sự kiện bắt giữ con trỏ, cả thu được và bị mất, đều có thể được sử dụng hiệu quả để bắt giữ con trỏ trong nhiều tình huống khác nhau.

Sự kiện gotpointercapture

Sự kiện gotpointercapture được kích hoạt khi một phần tử nắm bắt dữ liệu đầu vào của con trỏ. Sự kiện này có thể được sử dụng để thiết lập trạng thái xử lý các sự kiện con trỏ trên phần tử HTML. Ví dụ: trong một chương trình vẽ, sự kiện gotpointercapture có thể được tận dụng để đặt vị trí bắt đầu của con trỏ.

Sự kiện chụp con trỏ bị mất

Sự kiện chụp con trỏ bị mất được kích hoạt bất cứ khi nào một phần tử từ bỏ việc giữ con trỏ chuột. Sự kiện này tạo cơ hội để giải phóng hoặc loại bỏ bất kỳ trạng thái nào được thiết lập trước đó được bắt đầu khi phần tử thu được con trỏ. Trong ứng dụng đồ họa chẳng hạn như chương trình vẽ, Sự kiện chụp con trỏ bị mất có thể được sử dụng để che giấu sự hiện diện của con trỏ, nâng cao trải nghiệm người dùng thông qua khả năng tương tác liền mạch và hình ảnh đắm chìm.

Thuộc tính của sự kiện con trỏ

Các sự kiện con trỏ sở hữu một số thuộc tính nhất định góp phần nâng cao tính tương tác và khả năng phản hồi trên các trang web. Các thuộc tính này phản ánh những thuộc tính được tìm thấy trong các sự kiện chuột đồng thời kết hợp các đặc điểm bổ sung. Phần này đi sâu vào việc lựa chọn các tính năng bổ sung này.

Thuộc tính PointerId

pointerId là mã nhận dạng đặc biệt được gán cho mỗi đầu vào dựa trên con trỏ riêng lẻ, bao gồm cả những đầu vào được tạo bằng bút cảm ứng, ngón tay hoặc chuột. Mã định danh được tạo tự động này do trình duyệt cung cấp, cho phép theo dõi nhiều đầu vào và tạo điều kiện thực hiện các hành động khác nhau liên quan đến từng đầu vào tương ứng.

Trong kịch bản chơi trò chơi cảm ứng đa điểm, thuộc tính PointerId đóng vai trò là phương tiện hiệu quả để phân biệt giữa đầu vào bằng ngón tay hoặc bút cảm ứng riêng lẻ. Bằng cách chỉ định một mã nhận dạng duy nhất cho bề mặt của mỗi con trỏ, hệ thống có thể phân biệt và xử lý chính xác các lần chạm riêng biệt từ nhiều nguồn, với đầu vào ban đầu được chỉ định làm ID chính.

Thuộc tính này thể hiện tiện ích đáng kể khi được sử dụng với các thiết bị dựa trên cảm ứng, vì các thiết bị như vậy có khả năng cung cấp đồng thời nhiều đầu vào ngón tay mà không yêu cầu bất kỳ phần cứng ngoại vi bổ sung nào. Ngược lại, các thiết bị định hướng con trỏ, chủ yếu dựa vào việc sử dụng con trỏ chuột, bị hạn chế về khả năng nhận đồng thời nhiều đầu vào con trỏ, đòi hỏi phải kết hợp thiết bị bổ sung để kích hoạt chức năng này.

Chắc chắn, đây là phiên bản được diễn đạt trang nhã của đoạn mã được đề cập:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout « “ID of Pointer 1:"« *ptr1 « std::endl;std::cout « “ID của con trỏ 2:"« *ptr2 « std::endl;}//Cách sử dụng:int main() {int arr[5]={0, 1, 2, 3, 4};auto ptr1=Array;//Khai báo và khởi tạo con trỏ ‘ptr1’ với địa chỉ phần tử đầu tiên của mảng ‘arr’.auto ptr2=&arr[1];//Khai báo và khởi tạo con trỏ'

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

target.addEventListener('pointerdown', (event) => {
    console.log(`Pointer ID: ${event.pointerId}`);
    // Handle the pointer down event for the specific pointerId
});

Thuộc tính kiểu con trỏ

“chuột”, “bút” hoặc “chạm”. Bạn có thể tìm thấy minh họa đơn giản về cách sử dụng thuộc tính pointerType bên dưới:

 function handlePointerEvent(event){
    // Using the pointerType property
    switch (event.pointerType) {
    case 'mouse':
        // Handle the situation where the pointing device is a mouse
        console.log(`Mouse Pointer ID: ${event.pointerId}`);
        break;
    case 'pen':
        // Handle the situation where the pointing device is a stylus
        console.log(`Stylus Pointer ID: ${event.pointerId}`);
        break;
    case 'touch':
        // Handle the situation where the pointing device is a finger touch
        console.log(`Touch Pointer ID: ${event.pointerId}`);
        break;
    default:
        // Handle other pointer types or cases
        console.log(`pointerType ${event.pointerType} is not supported`);
        break;
    }
}

// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Thuộc tính chiều rộng và chiều cao

Kích thước của vùng tiếp xúc của con trỏ được biểu thị bằng milimét bằng các thuộc tính này. Thật không may, một số trình duyệt web không nhận ra các thuộc tính này, dẫn đến giá trị không đổi là 1 cho các trình duyệt cụ thể đó.

Có thể tìm thấy ứng dụng phù hợp cho các thuộc tính nói trên trong các chương trình yêu cầu đầu vào chính xác hoặc yêu cầu phân biệt giữa các đầu vào có kích thước khác nhau. Để minh họa, hãy xem xét một chương trình vẽ trong đó kích thước tăng tương ứng với nét vẽ rộng hơn, ngược lại, số đo nhỏ hơn biểu thị cử chỉ hẹp hơn.

Thông thường, khi làm việc với các sự kiện chạm trong quá trình phát triển web, thông thường sẽ sử dụng các thuộc tính chiều rộng và chiều cao.

Sử dụng Sự kiện con trỏ để có tính toàn diện hơn

Việc sử dụng các sự kiện con trỏ có thể đơn giản hóa đáng kể quá trình cung cấp các thiết bị và phương thức đầu vào đa dạng, loại bỏ nhu cầu nỗ lực quá mức từ phía bạn. Bạn nên tuân thủ các tiêu chuẩn hiện tại bằng cách kết hợp các sự kiện này vào ứng dụng của mình vì nó góp phần nâng cao trải nghiệm web.