Bagaimana Mengendalikan Input Kunci Anak Panah dalam JavaScript Menggunakan Peristiwa Utama?

Mengendalikan Input Kunci Anak Panah dalam Javascript Menggunakan Acara Utama

Mengesan dan mengendalikan input daripada kekunci anak panah boleh berguna untuk pelbagai senario dalam pembangunan web. Ini boleh dicapai melalui keupayaan pengendalian peristiwa utama terbina dalam penyemak imbas.

Penyelesaian Menggunakan Acara Utama Javascript:

Kod Javascript yang disediakan menggunakan document.onkeydown pengendali acara untuk mendengar tekanan kekunci. Apabila kekunci ditekan, sifat event.which digunakan untuk menentukan kod kunci. Kod kekunci anak panah sepadan dengan nilai berikut:

• Anak panah kiri: 37
• Anak panah atas: 38
• Anak panah kanan: 39
• Anak panah ke bawah : 40

Pernyataan suis mengendalikan kod kekunci ini dan membolehkan anda mentakrifkan logik tersuai anda untuk setiap penekanan kekunci.

Pelaksanaan Terperinci:

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

Pertimbangan Tambahan:

• Untuk sokongan Internet Explorer 8, ubah suai permulaan fungsi seperti berikut: e = e || tingkap.acara; suis(e.which || e.keyCode) {}
• Sehingga 2020, KeyboardEvent.which ditamatkan. Untuk penyelesaian yang lebih moden, gunakan KeyboardEvent.key:

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

        case "ArrowUp": // up
        break;

        case "ArrowRight": // right
        break;

        case "ArrowDown": // down
        break;

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

Atas ialah kandungan terperinci Bagaimana Mengendalikan Input Kunci Anak Panah dalam JavaScript Menggunakan Peristiwa Utama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!