Bagaimana untuk Mengendalikan Acara Utama Anak Panah dalam 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>

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>

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>

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!