Kapan klik bukan merupakan click
? Bagi pengembang web yang mengerjakan antarmuka pengguna
yang rumit, itu bukanlah pertanyaan filosofis yang abstrak. Jika Anda menerapkan
perilaku input mouse kustom, penting untuk mengingat niat pengguna. Misalnya, jika pengguna
mengklik link dengan tombol tengah mouse, maka wajar untuk
menganggap bahwa pengguna ingin membuka tab baru dengan konten
link tersebut. Jika pengguna mengklik tengah pada elemen UI acak, Anda mungkin ingin
mengasumsikan bahwa hal itu tidak disengaja, dan mengabaikan input tersebut, sementara klik tombol
utama akan diharapkan untuk memicu respons dari UI.
Jika agak rumit, Anda dapat memodelkan interaksi yang berbeda ini melalui satu pemroses peristiwa click
. Anda harus secara eksplisit memeriksa properti
button
dari
MouseEvent
,
untuk melihat apakah properti disetel ke 0
, yang mewakili tombol utama,
dibandingkan yang lainnya, dengan 1
biasanya mewakili tombol
tengah, dan seterusnya. Namun, tidak banyak developer yang memeriksa properti button
secara eksplisit, sehingga mengarah ke kode yang menangani semua click
secara identik, terlepas dari tombol mana yang ditekan.
Mulai Chrome 55, jenis MouseEvent
baru, yang disebut auxclick
, akan diaktifkan
sebagai respons terhadap setiap klik yang dilakukan dengan tombol non-utama. Peristiwa baru yang menyertainya merupakan perubahan yang sesuai dalam perilaku peristiwa click
: peristiwa hanya akan diaktifkan saat tombol mouse utama ditekan. Kami berharap perubahan ini akan
memudahkan developer web menulis pengendali peristiwa yang hanya merespons
jenis klik yang penting bagi mereka, tanpa harus memeriksa
properti MouseEvent.button
secara khusus.
Mengurangi positif palsu (PP)
Seperti yang telah disebutkan, salah satu motivasi untuk membuat auxclick
adalah menghindari deployment
pengendali click
kustom yang salah mengganti perilaku "middle-click-opens-a-tab". Misalnya, Anda telah menulis pengendali peristiwa click
yang menggunakan History API untuk menulis ulang panel lokasi, dan menerapkan navigasi satu halaman kustom. Data
mungkin terlihat seperti:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
Logika kustom Anda mungkin berfungsi sebagaimana mestinya saat dipicu oleh tombol utama mouse, tetapi jika kode tersebut berjalan saat tombol tengah diklik, hal itu pada dasarnya merupakan positif palsu (PP). Sebelum perilaku baru ini, Anda pada akhirnya akan mencegah tindakan default
membuka tab baru, yang bertentangan dengan ekspektasi pengguna.
Meskipun Anda dapat secara eksplisit memeriksa event.button === 0
di awal pengendali, dan hanya mengeksekusi kode jika demikian, kode tersebut mudah dilupakan, atau tidak pernah menyadari perlunya melakukannya.
Jalankan kode yang diperlukan saja
Sisi lain dari positif palsu yang lebih sedikit adalah callback auxclick
hanya akan
dijalankan saat sebenarnya ada tombol mouse non-utama yang diklik. Jika Anda memiliki kode
yang perlu, misalnya, menghitung URL tujuan yang sesuai sebelum
membuka tab baru, Anda dapat memproses auxclick
dan menyertakan logika tersebut dalam
callback Anda. Hal ini tidak akan menimbulkan overhead dijalankan saat tombol mouse utama
diklik.
Dukungan dan kompatibilitas browser
Perilaku baru ini saat ini hanya diterapkan di Chrome 55. Seperti yang disebutkan dalam proposal awal, masukan (positif dan negatif) dari komunitas developer web sangat diapresiasi. Mengajukan masalah GitHub adalah cara terbaik untuk membagikan masukan tersebut kepada orang-orang yang menangani proses standardisasi.
Sementara itu, developer tidak perlu menunggu auxclick
tersedia secara luas
untuk mengikuti beberapa praktik terbaik dalam menangani peristiwa mouse. Jika Anda meluangkan waktu untuk memeriksa nilai properti MouseEvent.button
di awal pengendali peristiwa click
, Anda dapat memastikan bahwa Anda mengambil tindakan yang tepat. Pola berikut akan menangani klik utama dan tambahan secara berbeda, terlepas dari apakah ada dukungan native untuk auxclick
atau tidak:
function handlePrimaryClick(event) {
// ...code to handle the primary button click...
}
function handleAuxClick(event) {
// ...code to handle the auxiliary button click….
}
document.querySelector('#my-link').addEventListener('click', event => {
if (event.button === 0) {
return handlePrimaryClick(event);
}
// This provides fallback behavior in browsers without auxclick.
return handleAuxClick(event);
});
// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);