Bagaimana untuk Mengikat Kekunci Anak Panah dalam JavaScript dan jQuery?

Mengikat Kekunci Anak Panah dalam JavaScript

Dalam sesetengah aplikasi, ia menjadi perlu untuk mengikat fungsi tertentu pada kekunci tertentu pada papan kekunci, seperti kekunci anak panah. Dalam artikel ini, kami akan meneroka cara untuk mengikat kekunci anak panah dalam JavaScript dan jQuery, memfokuskan pada anak panah kiri dan kanan.

Menggunakan JavaScript Standard

Kaedah paling mudah untuk mengendalikan peristiwa penting dalam JavaScript vanila adalah melalui pendengar acara document.onkeydown. Dengan melampirkan fungsi pada acara ini, kita boleh menyemak kod kekunci kekunci yang ditekan, yang sepadan dengan kekunci fizikal pada papan kekunci. Berikut ialah contoh:

<code class="js">document.onkeydown = function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

Menggunakan jQuery

jQuery menyediakan cara yang lebih ringkas dan mudah untuk mengikat pendengar acara. Sama seperti pendekatan sebelumnya, kita boleh menggunakan acara keydown untuk mengesan penekanan kekunci anak panah:

<code class="js">$(document).on("keydown", function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
});</code>

Keserasian IE8

Untuk penyemak imbas seperti IE8 yang tidak menyokong sifat mana pada objek acara, kita boleh menggunakan kod berikut:

<code class="js">e = e || window.event;
switch (e.which || e.keyCode) {
  case 37: // Left arrow
    // Do something
    break;

  case 39: // Right arrow
    // Do something else
    break;
}</code>

Nota tentang Kod Utama

Kod utama yang digunakan di sini (37 dan 39) sepadan ke kekunci anak panah kiri dan kanan, masing-masing. Anda boleh menemui kod kunci untuk kunci lain pada tapak web dokumentasi JavaScript atau jQuery rasmi.

JavaScript Moden

Dalam versi JavaScript yang lebih terkini, sifat yang telah ditamatkan memihak kepada KeyboardEvent.key. Berikut ialah contoh yang dikemas kini menggunakan KeyboardEvent.key:

<code class="js">document.onkeydown = function(e) {
  switch (e.key) {
    case "ArrowLeft": // Left arrow
      // Do something
      break;

    case "ArrowRight": // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

Dengan melaksanakan kaedah ini, anda boleh mengikat fungsi tertentu dengan mudah pada kekunci anak panah kiri dan kanan, membolehkan interaksi papan kekunci yang cekap dalam aplikasi anda.

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