Cara Menggunakan Acara Pointer di JavaScript

Poin Penting

• Aplikasi web harus mendukung berbagai perangkat input, bukan hanya mouse, untuk melayani khalayak yang lebih luas.
• Peristiwa penunjuk dalam JavaScript menangani peristiwa mouse dan sentuhan, sehingga menghilangkan kebutuhan untuk mengimplementasikannya secara terpisah.
• Peristiwa penunjuk memiliki nama dan fungsi yang mirip dengan peristiwa mouse, sehingga memudahkan pembaruan kode yang ada untuk mendukung input sentuh dan pena.

Banyak aplikasi web berasumsi bahwa perangkat penunjuk pengguna adalah mouse, sehingga mereka menggunakan peristiwa mouse untuk menangani interaksi. Namun, dengan maraknya perangkat layar sentuh, pengguna tidak memerlukan mouse untuk berinteraksi dengan situs web. Penting untuk mendukung berbagai perangkat masukan untuk melayani khalayak seluas mungkin.

JavaScript memiliki standar baru yang disebut peristiwa penunjuk. Ini menangani peristiwa mouse dan sentuhan, jadi Anda tidak perlu khawatir untuk mengimplementasikannya secara terpisah.

Apa Itu Acara Penunjuk?

Peristiwa penunjuk adalah standar web yang menentukan cara terpadu menangani berbagai metode masukan di browser web, termasuk mouse, sentuhan, dan pena. Peristiwa ini memberikan cara yang konsisten dan tidak bergantung pada platform untuk berinteraksi dengan konten web di berbagai perangkat.

Singkatnya, peristiwa penunjuk membantu Anda menangani kelompok interaksi pengguna ini, apa pun sumbernya.

Jenis Acara Penunjuk

Peristiwa penunjuk diberi nama serupa dengan peristiwa mouse yang mungkin sudah Anda kenal. Untuk setiap mouseEvent di JavaScript, ada yang sesuai pointerEvent. Ini berarti Anda dapat meninjau kembali kode lama dan mengganti “mouse” dengan “pointer” untuk mulai mendukung input sentuhan dan pena.

Tabel berikut memperlihatkan peristiwa penunjuk yang berbeda dibandingkan dengan peristiwa mouse:

Anda dapat melihat bahwa ada tiga peristiwa penunjuk tambahan tanpa peristiwa mouse yang terkait. Anda akan mempelajari peristiwa ini nanti.

Menggunakan Acara Pointer di JavaScript

Anda dapat menggunakan peristiwa penunjuk dengan cara yang sama seperti Anda menggunakan peristiwa mouse. Seperti kebanyakan penanganan event, prosesnya biasanya mengikuti pola berikut:

1. Gunakan pemilih DOM untuk mengambil elemen.
2. Menggunakan tambahkanEventListener metode, tentukan acara yang Anda minati dan fungsi panggilan balik.
3. Gunakan properti dan metode argumen panggilan balik, dan Peristiwa obyek.

Berikut ini contoh penggunaan acara pointermove:

// 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
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Blok kode ini mendefinisikan elemen target dan fungsi JavaScript untuk menangani gerakan penunjuk acara maka ia menggunakan a Pendengar acara JavaScript untuk melampirkan acara penunjuk dan fungsi ke elemen target.

Dengan menggunakan kode ini, elemen dengan ID “target” akan menampilkan koordinat penunjuk saat Anda menggerakkan kursor, jari, atau pena di atasnya:

Anda dapat menggunakan peristiwa penunjuk lainnya dengan cara yang sama.

Acara penunjuk membatalkan

Peristiwa pointercancel terpicu ketika peristiwa penunjuk lainnya diinterupsi sebelum ia menyelesaikan operasinya seperti yang dimaksudkan pada awalnya. Biasanya, browser membatalkan peristiwa penunjuk apa pun yang mungkin pernah terjadi sebelumnya. Ada banyak alasan mengapa a penunjuk batal peristiwa yang mungkin dipicu, misalnya:

• Saat pengguna menerima panggilan telepon atau notifikasi mengganggu lainnya saat menyeret elemen melintasi layar.
• Saat orientasi perangkat berubah.
• Saat jendela browser kehilangan fokus.
• Saat pengguna beralih ke tab atau aplikasi lain.

Dengan penunjuk batal acaranya, Anda dapat menangani situasi ini sesuka Anda. Berikut ini contohnya:

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

Pengambilan Penunjuk

Pengambilan pointer adalah fitur yang memungkinkan spesifik elemen HTML menangkap dan merespons semua peristiwa penunjuk untuk penunjuk tertentu, meskipun peristiwa tersebut terjadi di luar batas elemen.

Anda dapat mengatur pengambilan pointer untuk suatu elemen dengan tangkapan setpoint() metode dan lepaskan tangkapan pointer dengan rilispointercapture() metode.

Itu gotpointercapture Dan tangkapan penunjuk yang hilang acara penunjuk berguna untuk menangkap penunjuk.

Acara gotpointercapture

Itu gotpointercapture Acara dipicu setiap kali elemen mendapatkan tangkapan penunjuk. Anda dapat menggunakan peristiwa ini untuk menginisialisasi status elemen HTML Anda guna menangani peristiwa penunjuk. Misalnya pada aplikasi menggambar, Anda bisa menggunakan gotpointercapture acara untuk mengatur posisi awal kursor.

Acara lostpointercapture

Itu tangkapan penunjuk yang hilang Acara dipicu ketika suatu elemen kehilangan tangkapan pointer. Anda dapat menggunakannya untuk membersihkan atau menghapus status apa pun yang dibuat saat elemen memperoleh tangkapan penunjuk. Dalam aplikasi menggambar, Anda mungkin ingin menggunakan tangkapan penunjuk yang hilang untuk menyembunyikan kursor.

Properti Acara Penunjuk

Peristiwa penunjuk memiliki properti yang akan membantu Anda menjadikan situs web Anda lebih interaktif dan responsif. Properti peristiwa mouse adalah properti yang sama dengan yang Anda temukan di peristiwa penunjuk, ditambah beberapa properti tambahan. Artikel ini menjelaskan beberapa properti tambahan.

Properti pointerId

Itu pointerId adalah properti peristiwa penunjuk yang membantu Anda mengidentifikasi setiap masukan penunjuk unik, seperti stylus, jari, atau mouse. Setiap masukan penunjuk mendapat ID unik (dibuat secara otomatis oleh browser) yang memungkinkan Anda melacak dan melakukan operasi pada masukan tersebut.

Sangat berguna untuk pointerId properti adalah aplikasi game di mana pengguna menggunakan beberapa jari atau stylus secara bersamaan. Itu pointerId Properti memungkinkan Anda melacak setiap permukaan penunjuk dengan menetapkan ID unik untuk masing-masing permukaan tersebut. ID utama ditugaskan ke input penunjuk pertama.

Properti ini sangat berguna untuk perangkat sentuh. Perangkat yang mengandalkan penunjuk tetikus hanya dapat memiliki satu masukan penunjuk pada satu waktu tanpa ada perangkat eksternal yang tersambung ke perangkat tersebut.

Berikut ini contoh sederhana yang mencetak ID setiap input pointer ke konsol:

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

Properti pointerType

Properti pointerType membantu Anda membedakan berbagai tipe input pointer dan memungkinkan Anda melakukan operasi berdasarkan input tersebut. Anda dapat membedakan antara mouse, pena, dan sentuhan jari. Properti ini hanya dapat menerima satu dari tiga input string: “mouse”, “pena”, atau “sentuhan”. Berikut ini contoh sederhana cara menggunakan tipe penunjuk Properti:

functionhandlePointerEvent(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);

Properti lebar dan tinggi

Properti ini mewakili lebar dan tinggi area kontak penunjuk dalam milimeter. Beberapa browser tidak mendukungnya, dan nilainya akan selalu menjadi 1 di browser tersebut.

Kasus penggunaan yang baik untuk properti ini adalah dalam aplikasi yang memerlukan masukan yang tepat, atau perlu membedakan ukuran masukan yang berbeda. Misalnya, dalam aplikasi menggambar, tinggi dan lebar yang lebih besar mungkin berarti pengguna menggambar dengan guratan yang lebih lebar dan sebaliknya.

Sering kali, Anda mungkin akan menggunakan properti lebar dan tinggi untuk acara sentuh.

Gunakan Acara Pointer untuk Lebih Inklusivitas

Peristiwa penunjuk memungkinkan Anda melayani berbagai perangkat dan jenis masukan tanpa melalui banyak tekanan. Anda harus selalu menggunakannya dalam aplikasi Anda agar sesuai dengan standar modern dan membantu membangun web yang lebih baik.