auxclick akan hadir di Chrome 55

Jeff Posnick

Kapan klik bukan click? Bagi developer web yang mengerjakan antarmuka pengguna yang kompleks, pertanyaan tersebut bukanlah pertanyaan filosofis abstrak. Jika Anda menerapkan perilaku input mouse kustom, penting untuk mempertimbangkan niat pengguna. Misalnya, jika pengguna mengklik link dengan tombol tengah mouse, maka adalah hal yang wajar untuk mengasumsikan bahwa mereka ingin membuka tab baru dengan konten link tersebut. Jika pengguna mengklik tengah pada elemen UI acak, Anda dapat menganggap bahwa tindakan tersebut tidak disengaja, dan mengabaikan input tersebut, sementara klik tombol utama diharapkan akan memicu respons dari UI.

Anda dapat membuat model interaksi yang bernuansa ini melalui pemroses peristiwa click tunggal, meskipun sedikit rumit. Anda harus memeriksa properti button MouseEvent secara eksplisit, untuk melihat apakah properti tersebut ditetapkan ke 0, yang mewakili tombol utama, atau yang lainnya, dengan 1 biasanya mewakili tombol tengah, dan sebagainya. Namun, tidak banyak developer yang memeriksa properti button secara eksplisit, sehingga menghasilkan kode yang menangani semua click secara identik, terlepas dari tombol mana yang ditekan.

Mulai Chrome 55, jenis MouseEvent baru, yang disebut auxclick, diaktifkan sebagai respons terhadap klik apa pun yang dilakukan dengan tombol non-utama. Peristiwa baru ini disertai perubahan perilaku yang sesuai pada peristiwa click: peristiwa ini hanya akan terpicu saat tombol mouse utama ditekan. Kami harap perubahan ini akan memudahkan developer web menulis pengendali peristiwa yang hanya merespons jenis klik yang mereka minati, tanpa harus memeriksa properti MouseEvent.button secara khusus.

Mengurangi positif palsu

Seperti yang disebutkan, salah satu motivasi untuk membuat auxclick adalah untuk menghindari deployment pengendali click kustom yang keliru mengganti perilaku "klik tengah-membuka tab". Misalnya, bayangkan Anda telah menulis pengendali peristiwa click yang menggunakan History API untuk menulis ulang kolom URL, dan menerapkan navigasi satu halaman kustom. Tampilannya 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 seperti yang diinginkan saat dipicu oleh tombol utama mouse, tetapi jika kode tersebut berjalan saat tombol tengah diklik, kode tersebut secara efektif merupakan positif palsu. Sebelum perilaku baru, Anda akan mencegah tindakan default membuka tab baru, yang bertentangan dengan ekspektasi pengguna. Meskipun Anda dapat memeriksa event.button === 0 secara eksplisit di awal pengendali, dan hanya mengeksekusi kode jika memang demikian, hal ini mudah dilupakan, atau tidak pernah menyadari bahwa hal itu perlu dilakukan.

Hanya jalankan kode yang Anda perlukan

Sisi lain dari lebih sedikit positif palsu adalah callback auxclick hanya akan berjalan jika benar-benar ada tombol mouse non-utama yang diklik. Jika memiliki kode yang perlu, misalnya, menghitung URL tujuan yang sesuai sebelum membuka tab baru, Anda dapat memproses auxclick dan menyertakan logika tersebut dalam callback. Fungsi ini tidak akan menimbulkan overhead saat 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 (baik positif maupun negatif) dari komunitas developer web sangat kami hargai. Melaporkan masalah GitHub adalah cara terbaik untuk membagikan masukan tersebut kepada orang-orang yang mengerjakan proses standardisasi.

Sementara itu, developer tidak perlu menunggu auxclick tersedia secara luas untuk mengikuti beberapa praktik terbaik dalam menangani peristiwa mouse. Jika meluangkan waktu untuk memeriksa nilai properti MouseEvent.button di awal penangan peristiwa click, Anda dapat memastikan bahwa Anda mengambil tindakan yang sesuai. Pola berikut akan menangani klik utama dan tambahan secara berbeda, baik ada maupun tidak ada dukungan native untuk auxclick:

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