Ketika Klik Bukan Sekedar Klik

Acara click cukup sederhana dan mudah digunakan; Anda mendengarkan acara dan menjalankan kode saat acara dipecat. Ini bekerja pada hampir setiap elemen HTML yang ada, fitur inti dari DOM API.

Seperti yang sering terjadi pada DOM dan JavaScript, ada nuansa yang perlu dipertimbangkan. Beberapa nuansa dengan acara klik biasanya tidak terlalu menjadi perhatian. Mereka kecil dan mungkin kebanyakan orang tidak akan pernah menyadarinya di sebagian besar kasus penggunaan.

Ambil, misalnya, click yang mendengarkan kakek dari elemen interaktif, elemen <button> . Ada nuansa yang terkait dengan klik tombol dan nuansa ini, seperti perbedaan antara "klik" dari penunjuk tetikus dan "klik" dari keyboard. Dilihat dengan cara ini, klik tidak selalu merupakan "klik" seperti yang biasanya didefinisikan. Saya sebenarnya telah mengalami situasi (meskipun tidak banyak) di mana membedakan antara kedua jenis klik itu berguna.

Bagaimana cara membedakan jenis klik yang berbeda? Itulah yang kami selami!

Hal pertama yang pertama

<button> , seperti yang dijelaskan oleh MDN , hanyalah:

Elemen HTML mewakili tombol yang dapat diklik, digunakan untuk mengirimkan formulir atau di mana pun dalam dokumen untuk fungsionalitas tombol standar yang dapat diakses. Secara default, tombol HTML disajikan dalam gaya yang menyerupai platform tempat agen pengguna berjalan, tetapi Anda dapat mengubah tampilan tombol dengan CSS.

Bagian yang akan kita bahas jelas adalah bagian "di mana saja dalam dokumen untuk fungsi tombol standar yang dapat diakses" dari deskripsi itu. Seperti yang Anda ketahui, elemen tombol dapat memiliki fungsionalitas asli dalam formulir, misalnya dapat mengirimkan formulir dalam beberapa situasi. Kami hanya benar-benar memperhatikan diri kami sendiri atas fungsi klik dasar elemen. Jadi pertimbangkan hanya tombol sederhana yang ditempatkan pada halaman untuk fungsionalitas tertentu ketika seseorang berinteraksi dengannya.

Pertimbangkan bahwa saya mengatakan "berinteraksi dengannya" alih-alih hanya mengkliknya. Untuk alasan historis dan kegunaan, seseorang dapat "mengklik" tombol dengan memfokuskannya dengan tab dan kemudian menggunakan tombol Spasi atau Enter pada keyboard. Ini sedikit tumpang tindih dengan navigasi dan aksesibilitas keyboard; fitur asli ini ada jauh sebelum aksesibilitas menjadi perhatian. Namun fitur lawas sangat membantu aksesibilitas karena alasan yang jelas.

Pada contoh di atas, Anda dapat mengklik tombol dan label teksnya akan berubah. Setelah beberapa saat, teks asli akan diatur ulang. Anda juga dapat mengklik di tempat lain di dalam pena, tab untuk memfokuskan tombol, lalu gunakan Spasi atau Enter untuk "mengklik" tombol tersebut. Teks yang sama muncul dan disetel ulang juga. Tidak ada JavaScript untuk menangani fungsionalitas keyboard; itu adalah fitur asli dari browser. Pada dasarnya, dalam contoh ini tombol hanya mengetahui peristiwa klik, tetapi tidak mengetahui bagaimana hal itu terjadi.

Satu perbedaan menarik untuk dipertimbangkan adalah perilaku tombol di berbagai browser, terutama gayanya. Tombol-tombol dalam contoh ini diatur untuk mengubah warna pada status aktifnya; jadi Anda klik dan berubah menjadi ungu. Pertimbangkan gambar ini yang menunjukkan status saat berinteraksi dengan keyboard.

Status Interaksi Keyboard

Yang pertama adalah status statis, yang kedua adalah ketika tombol memiliki fokus dari keyboard yang ditabrak ke atasnya, yang ketiga adalah interaksi keyboard, dan yang keempat adalah hasil interaksi. Dengan Firefox Anda hanya akan melihat dua status pertama dan terakhir; saat berinteraksi dengan tombol Enter atau Spasi untuk “mengklik”, Anda tidak melihat status ketiga. Itu tetap dengan yang kedua, atau "terfokus", negara selama interaksi dan kemudian bergeser ke yang terakhir. Teks berubah seperti yang diharapkan tetapi warnanya tidak. Chrome memberi kami sedikit lebih banyak karena Anda akan melihat dua status pertama sama dengan Firefox. Jika Anda menggunakan tombol Spasi untuk "mengklik" tombol, Anda akan melihat status ketiga dengan perubahan warna dan kemudian yang terakhir. Cukup menarik, dengan Chrome jika Anda menggunakan Enter untuk berinteraksi dengan tombol, Anda tidak akan melihat status ketiga dengan perubahan warna, seperti Firefox. Jika Anda penasaran, Safari berperilaku sama seperti Chrome.

Kode untuk pendengar acara cukup sederhana:

 const button = document.querySelector('#button'); button.addEventListener('click', () => { button.innerText = 'Button Clicked!'; window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); });

Sekarang, mari kita pertimbangkan sesuatu di sini dengan kode ini. Bagaimana jika Anda menemukan diri Anda dalam situasi di mana Anda ingin tahu apa yang menyebabkan "klik" terjadi? Acara klik biasanya terkait dengan perangkat penunjuk, biasanya mouse, namun di sini tombol Spasi atau Enter memicu peristiwa yang sama. Elemen formulir lain memiliki fungsi serupa tergantung pada konteksnya, tetapi elemen apa pun yang tidak interaktif secara default akan memerlukan acara keyboard tambahan agar berfungsi. Elemen tombol tidak memerlukan pendengar acara tambahan ini.

Saya tidak akan membahas terlalu jauh alasan ingin tahu apa yang memicu acara klik. Saya dapat mengatakan bahwa saya kadang-kadang mengalami situasi di mana sangat membantu untuk mengetahuinya. Terkadang untuk alasan gaya, terkadang aksesibilitas, dan terkadang untuk fungsionalitas tertentu. Seringkali konteks atau situasi yang berbeda memberikan alasan yang berbeda.

Pertimbangkan yang berikut ini bukan sebagai The Way™ tetapi lebih merupakan eksplorasi nuansa yang sedang kita bicarakan. Kami akan mengeksplorasi penanganan berbagai cara untuk berinteraksi dengan elemen tombol, peristiwa yang dihasilkan, dan memanfaatkan fitur spesifik dari peristiwa ini. Semoga contoh-contoh berikut dapat memberikan beberapa informasi bermanfaat dari acara tersebut; atau mungkin menyebar ke elemen HTML lain, sesuai kebutuhan.

Yang mana?

Salah satu cara sederhana untuk mengetahui kejadian klik keyboard versus mouse adalah dengan memanfaatkan kejadian keyup dan mouseup , menghilangkan kejadian klik dari persamaan.

Sekarang, saat Anda menggunakan mouse atau keyboard, teks yang diubah mencerminkan peristiwa yang mana. Versi keyboard bahkan akan memberi tahu Anda tentang tombol Space versus Enter yang digunakan.

Berikut kode barunya:

 const button = document.querySelector('#button'); function reset () { window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); } button.addEventListener('mouseup', (e) => { if (e.button === 0) { button.innerText = 'MouseUp Event!'; reset(); } }); button.addEventListener('keyup', (e) => { if (e.code === 'Space' || e.code === 'Enter') { button.innerText = `KeyUp Event: ${e.code}`; reset(); } });

Sedikit bertele-tele, benar, tetapi kita akan mendapatkan sedikit refactor sedikit. Contoh ini menjelaskan tentang nuansa yang perlu ditangani. Acara mouseup dan keyup memiliki fitur mereka sendiri untuk diperhitungkan dalam situasi ini.

Dengan mouseup , hampir setiap tombol pada mouse dapat memicu acara ini. Kami biasanya tidak ingin tombol kanan mouse memicu acara "klik" pada tombol, misalnya. Jadi kami mencari e.button dengan nilai 0 untuk mengidentifikasi tombol utama mouse. Dengan cara itu kerjanya sama seperti dengan acara klik namun kita tahu pasti itu adalah mouse.

Dengan keyup , hal yang sama terjadi di mana setiap tombol pada keyboard akan memicu acara ini. Jadi kita melihat code acara untuk menunggu tombol Spasi atau Enter ditekan. Jadi sekarang ini berfungsi sama dengan acara klik tetapi kami tahu keyboard digunakan. Kami bahkan tahu yang mana dari dua tombol yang kami harapkan berfungsi pada tombol tersebut.

Pengambilan lain untuk menentukan yang mana

Sementara contoh sebelumnya berfungsi, sepertinya terlalu banyak kode untuk konsep yang begitu sederhana. Kami benar-benar hanya ingin tahu apakah "klik" itu berasal dari mouse atau keyboard. Dalam kebanyakan kasus, kami mungkin tidak akan peduli jika sumber kliknya adalah tombol Spasi atau Enter . Tetapi, jika kita peduli, kita dapat memanfaatkan keyup untuk mencatat yang mana.

Terkubur dalam berbagai spesifikasi tentang click (yang membawa kita ke spesifikasi Acara UI ) ada properti tertentu yang ditetapkan untuk acara terkait lokasi mouse, termasuk properti seperti screenX / screenY dan clientX / clientY . Beberapa browser memiliki lebih banyak, tetapi saya ingin fokus pada properti screenX / screenY untuk saat ini. Kedua properti ini pada dasarnya memberi Anda X dan Y dari klik mouse dalam kaitannya dengan kiri atas layar. Properti clientX / clientY melakukan hal yang sama, tetapi Origin berada di kiri atas viewport browser.

Trik ini bergantung pada fakta bahwa click menyediakan koordinat ini meskipun event dipicu oleh keyboard. Ketika tombol dengan click "diklik" oleh tombol Spasi atau Enter, ia masih perlu menetapkan nilai ke properti tersebut. Karena tidak ada lokasi mouse untuk dilaporkan, jika itu jatuh kembali ke nol sebagai default.

Berikut kode baru kami:

 const button = document.querySelector('#button'); button.addEventListener('click', (e) => { button.innerText = e.screenX + e.screenY === 0 || e.offsetX + e.offsetY === 0 ? 'Keyboard Click Event!' : 'Mouse Click Event!'; window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); });

Kembali ke click , tetapi kali ini kami mencari properti tersebut untuk menentukan apakah ini "klik" keyboard atau mouse. Kami mengambil kedua screenX dan screenY properti, menambahkan mereka bersama-sama, dan melihat apakah mereka sama dengan nol; yang membuat ujian menjadi mudah. Kemungkinan tombol yang berada di kiri atas layar untuk diklik harus cukup rendah. Itu mungkin terjadi jika seseorang mencoba melakukan klik sempurna piksel di lokasi yang aneh, tetapi saya pikir itu adalah asumsi yang aman bahwa itu tidak akan terjadi dalam keadaan normal.

Sekarang, orang mungkin memperhatikan bagian e.offsetX + e.offsetY === 0 yang ditambahkan. Saya harus menjelaskan sedikit…

Masukkan inkonsistensi browser yang ditakuti

Saat membuat dan menguji kode ini, masalah dukungan lintas-browser yang terlalu sering muncul muncul. Ternyata meskipun sebagian besar browser menyetel nilai screenX dan screenY pada peristiwa klik yang disebabkan keyboard ke nol, Safari memutuskan untuk menjadi berbeda. Ini menerapkan nilai yang tepat untuk screenX dan screenY seolah-olah tombol diklik oleh mouse. Ini menimbulkan masalah pada kode saya yang merupakan salah satu aspek menyenangkan dalam berurusan dengan browser yang berbeda — browser dibuat oleh kelompok berbeda dari orang berbeda yang menciptakan hasil berbeda untuk kasus penggunaan yang sama.

Tapi, sayangnya, saya membutuhkan solusi karena saya tidak ingin hanya mengandalkan acara keyup untuk versi kode ini. Maksudku, kita bisa jika kita mau, jadi itu masih pilihan. Hanya saja saya menyukai gagasan memperlakukan ini sebagai latihan pembelajaran potensial untuk menentukan apa yang terjadi dan bagaimana membuat penyesuaian untuk perbedaan di browser seperti yang kita lihat di sini.

Menguji apa yang dilakukan Safari dalam kasus ini, tampaknya menggunakan properti offsetX dan offsetY jika menentukan lokasi "klik" dan kemudian menerapkan matematika untuk menentukan nilai screenX dan screenY . Itu penyederhanaan besar yang berlebihan, tetapi itu seperti memeriksa. Properti offset akan menjadi lokasi klik berdasarkan kiri atas tombol. Dalam konteks ini, Safari menerapkan nol ke offsetX dan offsetY , yang jelas terlihat sebagai kiri atas tombol. Dari sana ia memperlakukan lokasi tombol tersebut sebagai penentuan properti layar berdasarkan jarak dari kiri atas tombol ke kiri atas layar.

Peramban biasa lainnya secara teknis juga menerapkan nol untuk offestX dan offsetY , dan dapat digunakan sebagai pengganti screenX dan screenY . Saya memilih untuk tidak menempuh jalan itu. Sangat mungkin untuk mengklik tombol yang berada di kiri atas layar agak sulit saat mengklik kiri atas tombol. Namun, Safari berbeda sehingga tes terhadap layar dan offset adalah hasilnya. Kode, seperti yang tertulis, mengharapkan nol pada properti layar dan, jika ada, ia bergerak maju dengan asumsi klik yang disebabkan oleh keyboard . Jika properti layar bersama-sama lebih besar dari nol, ia memeriksa properti offset untuk berjaga-jaga. Kami dapat menganggap ini sebagai pemeriksaan Safari.

Ini tidak ideal, tetapi ini bukan pertama kalinya saya harus membuat logika percabangan karena inkonsistensi browser.

Dengan harapan bahwa perilaku properti ini tidak akan berubah di masa mendatang, kami memiliki cara yang layak untuk menentukan apakah click tombol terjadi oleh mouse atau keyboard. Namun, teknologi terus memberi kami fitur baru, persyaratan baru, dan tantangan baru untuk dipertimbangkan. Berbagai perangkat yang tersedia bagi kami telah memulai konsep "penunjuk" sebagai sarana untuk berinteraksi dengan elemen di layar. Saat ini, penunjuk seperti itu bisa berupa mouse, pena, atau sentuhan. Ini menciptakan nuansa lain yang mungkin ingin kita pertimbangkan; menentukan jenis pointer yang terlibat dalam klik.

Yang mana dari sekian banyak?

Sekarang adalah waktu yang tepat untuk berbicara tentang Acara Pointer . Seperti yang dijelaskan oleh MDN:

Sebagian besar konten web saat ini mengasumsikan perangkat penunjuk pengguna adalah mouse. Namun, karena banyak perangkat mendukung jenis perangkat input penunjuk lainnya, seperti pena/stylus dan permukaan sentuh, ekstensi ke model peristiwa perangkat penunjuk yang ada diperlukan. Acara pointer menjawab kebutuhan itu.

Jadi sekarang mari kita pertimbangkan kebutuhan untuk mengetahui jenis pointer apa yang terlibat dalam mengklik tombol itu. Mengandalkan hanya acara klik tidak benar-benar memberikan informasi ini. Chrome memang memiliki properti yang menarik di acara klik, sourceCapabilities . Properti ini pada gilirannya memiliki properti bernama firesTouchEvents yang merupakan boolean. Informasi ini tidak selalu tersedia karena Firefox dan Safari belum mendukungnya. Namun acara pointer tersedia banyak di mana-mana, bahkan IE11 dari semua browser.

Event ini dapat memberikan data menarik tentang event touch atau pen. Hal-hal seperti tekanan, ukuran kontak, kemiringan, dan lainnya. Untuk contoh kami di sini, kami hanya akan fokus pada pointerType , yang memberi tahu kami jenis perangkat yang menyebabkan acara tersebut.

Mengklik tombol sekarang akan memberi tahu Anda penunjuk yang digunakan. Kode untuk ini cukup sederhana:

 const button = document.querySelector('#button'); button.addEventListener('pointerup', (e) => { button.innerText = `Pointer Event: ${e.pointerType}`; window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); });

Sungguh, tidak jauh berbeda dengan contoh-contoh sebelumnya. Kami mendengarkan pointerup pada tombol dan menampilkan pointerType acara. Bedanya sekarang adalah tidak ada event listener untuk event klik. Jadi tab ke tombol dan menggunakan spasi atau tombol enter tidak melakukan apa-apa. Acara klik masih aktif, tetapi kami tidak mendengarkannya. Pada titik ini kami hanya memiliki kode yang diikat ke tombol yang hanya merespons event pointer.

Itu jelas meninggalkan celah dalam fungsionalitas, interaktivitas keyboard, jadi kami masih perlu menyertakan acara klik. Karena kita sudah menggunakan event pointer untuk klik mouse yang lebih tradisional (dan event pointer lainnya), kita harus mengunci event click. Kita hanya perlu mengizinkan keyboard itu sendiri untuk memicu acara klik.

Kode untuk ini mirip dengan contoh "Yang Mana" di atas. Perbedaan yang kita gunakan pointerup bukan mouseup :

 const button = document.querySelector('#button'); function reset () { window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); } button.addEventListener('pointerup', (e) => { button.innerText = `Pointer Event: ${e.pointerType}`; reset(); }); button.addEventListener('click', (e) => { if (e.screenX + e.screenY === 0 || e.offsetX + e.offsetY === 0) { button.innerText = 'Keyboard ||Click Event!'; reset(); } });

Di sini kita menggunakan metode screenX + screenY (dengan pemeriksaan offset tambahan) untuk menentukan apakah klik tersebut disebabkan oleh keyboard. Dengan cara ini klik mouse akan ditangani oleh acara pointer. Jika ingin mengetahui apakah kunci yang digunakan adalah spasi atau enter, maka contoh keyup di atas bisa digunakan. Meski begitu, acara keyup dapat digunakan sebagai ganti acara klik tergantung pada bagaimana Anda ingin mendekatinya.

Anoher mengambil untuk menentukan yang mana dari banyak

Dalam kebutuhan yang selalu ada untuk refactor untuk kode yang lebih bersih, kita dapat mencoba cara lain untuk mengkodekan ini.

Ya, cara kerjanya sama seperti sebelumnya. Sekarang kodenya adalah:

 const button = document.querySelector('#button'); function btn_handler (e) { if (e.type === 'click' && e.screenX + e.screenY > 0 && e.offsetX + e.offsetY > 0) { return false; } else if (e.pointerType) { button.innerText = `Pointer Event: ${e.pointerType}`; } else if (e.screenX + e.screenY === 0) { button.innerText = 'Keyboard Click Event!'; } else { button.innerText = 'Something clicked this?'; } window.setTimeout(() => { button.innerText = '"click" me'; }, 2000); } button.addEventListener('pointerup', btn_handler); button.addEventListener('click', btn_handler);

Versi lain yang diperkecil untuk dipertimbangkan: kali ini kami telah mengurangi kode kami menjadi satu metode handler yang pointerup peristiwa pointerup dan click Pertama kami mendeteksi jika mouse "klik" menyebabkan acara tersebut; jika ya, kami ingin mengabaikannya demi event pointer. Ini diperiksa dengan tes kebalikan dari tes keyboard; apakah jumlah screenX dan screenY lebih besar dari nol? Kali ini ada perubahan pada pemeriksaan offset dengan melakukan hal yang sama seperti screen test, apakah jumlah properti tersebut lebih besar dari nol juga?

Kemudian metode memeriksa peristiwa penunjuk, dan setelah menemukannya, metode itu melaporkan jenis penunjuk mana yang terjadi. Jika tidak, metode akan memeriksa interaksi keyboard dan melaporkannya. Jika tak satu pun dari mereka adalah pelakunya, itu hanya melaporkan bahwa ada sesuatu yang menyebabkan kode ini berjalan.

Jadi di sini kami memiliki sejumlah contoh yang layak tentang cara menangani interaksi tombol sambil melaporkan sumber interaksi tersebut. Namun, ini hanyalah salah satu dari segelintir elemen bentuk yang biasa kita gunakan dalam proyek. Bagaimana kode serupa bekerja dengan elemen lain?

Memeriksa kotak centang

Memang, kode serupa bekerja dengan cara yang sangat mirip dengan kotak centang.

Ada beberapa nuansa lagi, seperti yang mungkin Anda harapkan sekarang. Penggunaan normal <input type="checkbox"> adalah elemen label terkait yang diikat ke input melalui atribut for . Salah satu fitur utama dari kombinasi ini adalah mengklik elemen label akan mencentang kotak terkait.

Sekarang, jika kita melampirkan pendengar acara untuk click pada kedua elemen, kita mendapatkan kembali apa yang seharusnya menjadi hasil yang jelas, meskipun itu agak aneh. Misalnya, kami mendapatkan click yang dipicu saat mengklik kotak centang. Jika kami mengklik label, kami mendapatkan dua click dipicu sebagai gantinya. Jika kita ingin console.log target peristiwa tersebut, kita akan melihat pada peristiwa ganda yang satu untuk label (yang masuk akal saat kita mengkliknya), tetapi ada peristiwa kedua dari kotak centang. Meskipun saya tahu ini seharusnya hasil yang diharapkan, ini agak aneh karena kami mengharapkan hasil dari interaksi pengguna. Padahal hasilnya termasuk interaksi yang disebabkan oleh browser .

Jadi, langkah selanjutnya adalah melihat apa yang terjadi jika kita mendengarkan pointerup , seperti beberapa contoh sebelumnya, dalam skenario yang sama. Dalam hal ini, kami tidak mendapatkan dua peristiwa saat mengklik elemen label. Ini juga masuk akal karena kami tidak lagi mendengarkan click yang dipicu dari kotak centang saat label diklik.

Masih ada skenario lain yang perlu dipertimbangkan. Ingatlah bahwa kita memiliki opsi untuk menempatkan kotak centang di dalam elemen label , yang umum dengan kotak centang yang dibuat khusus untuk tujuan penataan gaya.

 <label for="newsletter"> <input type="checkbox" /> Subscribe to my newsletter </label>

Dalam hal ini, kita benar-benar hanya perlu menempatkan pendengar acara pada label dan bukan kotak centang itu sendiri. Ini mengurangi jumlah pendengar acara yang terlibat, namun kami mendapatkan hasil yang sama. Peristiwa klik dipicu sebagai peristiwa tunggal untuk mengklik label dan dua peristiwa jika Anda mengeklik kotak centang. pointerup melakukan hal yang sama seperti sebelumnya juga, peristiwa tunggal jika mengklik salah satu elemen.

Ini semua adalah hal yang perlu dipertimbangkan saat mencoba meniru perilaku contoh sebelumnya dengan elemen tombol. Syukurlah, tidak terlalu banyak. Berikut ini contoh melihat jenis interaksi apa yang dilakukan dengan elemen formulir kotak centang:

Contoh ini mencakup kedua jenis skenario kotak centang yang disebutkan di atas; baris atas adalah kombinasi kotak centang/label dengan for , dan baris bawah adalah kotak centang di dalam label. Mengklik salah satu akan menampilkan pesan di bawahnya yang menyatakan jenis interaksi yang terjadi. Jadi klik salah satunya dengan mouse atau gunakan keyboard untuk menavigasi ke sana dan kemudian berinteraksi dengan Space atau Enter ; seperti contoh tombol, itu akan memberi tahu Anda jenis interaksi mana yang menyebabkannya.

Untuk mempermudah dalam hal berapa banyak pendengar acara yang saya butuhkan, saya membungkus kotak centang dengan div wadah yang benar-benar merespons interaksi kotak centang. Anda tidak perlu melakukannya dengan cara ini, tetapi itu adalah cara yang nyaman untuk melakukan ini untuk kebutuhan saya. Bagi saya, bagian yang menyenangkan adalah kode dari contoh tombol terakhir di atas baru saja disalin ke contoh ini.

 const checkbox_container = document.querySelector('#checkbox_container'); const checkbox_msg = document.querySelector('#checkbox_msg'); function chk_handler (e) { if (e.type === 'click' && e.screenX + e.screenY > 0 && e.offsetX + e.offsetY > 0) { return false; } else if (e.pointerType) { checkbox_msg.innerText = `Pointer Event: ${e.pointerType}`; } else if (e.screenX + e.screenY === 0) { checkbox_msg.innerText = 'Keyboard Click Event!'; } else { checkbox_msg.innerText = 'Something clicked this?'; } window.setTimeout(() => { checkbox_msg.innerText = 'waiting...'; }, 2000); } checkbox_container.addEventListener('pointerup', chk_handler); checkbox_container.addEventListener('click', chk_handler);

Itu berarti kita mungkin memiliki metode yang sama yang dipanggil dari berbagai elemen yang membutuhkan pendeteksian fungsionalitas tipe pointer yang sama. Secara teknis, kita bisa meletakkan tombol di dalam wadah kotak centang dan itu harus tetap berfungsi sama. Pada akhirnya terserah Anda bagaimana menerapkan hal-hal seperti itu berdasarkan kebutuhan proyek.

Meradiasikan tombol radio Anda

Untungnya, untuk input tombol radio, kita masih dapat menggunakan kode yang sama dengan struktur HTML yang serupa. Ini sebagian besar bekerja dengan cara yang sama karena kotak centang dan tombol radio pada dasarnya dibuat dengan cara yang sama—hanya saja tombol radio cenderung datang dalam grup yang diikat bersama sementara kotak centang adalah individu bahkan dalam grup. Seperti yang akan Anda lihat dalam contoh berikut, cara kerjanya sama:

Sekali lagi, kode yang sama dilampirkan ke div penampung yang serupa untuk mencegah keharusan melakukan sejumlah pendengar acara untuk setiap elemen terkait.

Ketika sebuah nuansa bisa menjadi peluang

Saya merasa bahwa "nuansa" adalah pilihan kata yang baik karena hal-hal yang kami bahas di sini sebenarnya bukan "masalah" dengan konotasi negatif yang cenderung dimiliki oleh kata itu di kalangan pemrograman. Saya selalu mencoba melihat hal-hal seperti pengalaman belajar atau peluang. Bagaimana saya bisa memanfaatkan hal-hal yang saya tahu hari ini untuk mendorong sedikit lebih jauh ke depan, atau mungkin sudah waktunya untuk mengeksplorasi hal-hal baru untuk memecahkan masalah yang saya hadapi. Mudah-mudahan, contoh di atas memberikan cara yang agak berbeda untuk melihat hal-hal tergantung pada kebutuhan proyek yang ada.

Kami bahkan menemukan peluang untuk menjelajahi inkonsistensi browser dan menemukan solusi untuk situasi itu. Untungnya, kami tidak mengalami banyak hal seperti itu dengan browser saat ini, tetapi saya dapat menceritakan kisah tentang apa yang kami alami ketika saya pertama kali memulai pengembangan web.

Meskipun artikel ini lebih berfokus pada elemen formulir karena nuansa klik yang cenderung mereka miliki dengan interaksi keyboard, beberapa atau semua ini dapat diperluas ke elemen lain. Itu semua tergantung pada konteks situasi. Sebagai contoh, saya ingat harus melakukan beberapa acara pada elemen yang sama tergantung pada konteksnya berkali-kali; seringkali karena alasan aksesibilitas dan navigasi keyboard. Sudahkah Anda membuat <select> untuk memiliki desain yang lebih bagus daripada yang standar, yang juga merespons navigasi keyboard? Anda akan melihat apa yang saya maksud ketika Anda sampai di sana.

Ingat saja: "klik" hari ini tidak harus selalu seperti yang kita pikirkan tentang klik.


Posting When a Click is Not Just a Click muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 30, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *