auxclick akan hadir di Chrome 55

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