Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengendalikan Acara Utama Anak Panah dalam JavaScript/jQuery?

Bagaimana untuk Mengendalikan Acara Utama Anak Panah dalam JavaScript/jQuery?

Susan Sarandon
Lepaskan: 2024-10-30 17:26:02
asal
384 orang telah melayarinya

How to Handle Arrow Key Events in JavaScript/jQuery?

Mengendalikan Peristiwa Kekunci Anak Panah dalam Javascript/jQuery

Apabila bekerja dengan input papan kekunci dalam Javascript atau jQuery, fungsi mengikat ke kunci tertentu boleh menjadi penting untuk mengawal interaksi pengguna dan menyediakan navigasi responsif. Dalam konteks ini, cabaran biasa ialah menangkap peristiwa kekunci anak panah kiri dan kanan. Bertentangan dengan kepercayaan popular, pemalam js-hotkey untuk jQuery tidak menyokong pengikatan kekunci anak panah secara asli.

Menggunakan Javascript Biasa

Untuk pengikatan terus tanpa menggunakan perpustakaan luaran, pertimbangkan coretan kod berikut:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>
Salin selepas log masuk

Dalam kod ini, acara utama dipantau menggunakan pengendali acara onkeydown. Kekunci anak panah dikenal pasti mengikut nilai masing-masing (cth., 37 untuk kiri, 39 untuk kanan). Untuk mengelakkan tingkah laku penyemak imbas lalai seperti menatal atau pergerakan tanda tanda, kaedah preventDefault() digunakan.

Menyokong IE8

Jika anda perlu menyokong Internet Explorer 8 , yang tidak menyokong sifat mana, anda boleh menambah kod seperti berikut:

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event; // IE8 compatibility
    switch(e.which || e.keyCode) {
        // ...
    }
};</code>
Salin selepas log masuk

Penyelesaian Moden: KeyboardEvent.key

Dalam penyemak imbas moden, sifat KeyboardEvent.which telah ditamatkan. Untuk pendekatan yang lebih terkini untuk mengesan kekunci anak panah, anda boleh menggunakan sifat KeyboardEvent.key sebaliknya:

<code class="javascript">document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowLeft': // left
      break;
    case 'ArrowUp': // up
      break;
    case 'ArrowRight': // right
      break;
    case 'ArrowDown': // down
      break;
    default: return;
  }
});</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Acara Utama Anak Panah dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan