Rumah > Artikel > hujung hadapan web > Bagaimanakah cara saya Mengikat Kekunci Anak Panah dalam JavaScript dan jQuery?
Kekunci Anak Panah Pengikat Kekunci dalam JavaScript dan jQuery
Meningkatkan interaksi pengguna selalunya memerlukan fungsi pengikatan pada kunci tertentu. Kekunci anak panah biasanya digunakan untuk navigasi, tetapi ia boleh menjadi satu cabaran untuk disepadukan ke dalam JavaScript dan jQuery.
Penyelesaian jQuery
Manakala pemalam js-hotkey menawarkan pengikat kekunci yang dipertingkatkan keupayaan, ia tidak mempunyai sokongan untuk kekunci anak panah. Walau bagaimanapun, pengendali acara keydown jQuery menyediakan penyelesaian alternatif.
<code class="js">$(document).keydown(function(e) { switch (e.which) { case 37: // Left // Insert your left arrow key code break; case 38: // Up // Insert your up arrow key code break; case 39: // Right // Insert your right arrow key code break; case 40: // Down // Insert your down arrow key code break; } e.preventDefault(); });</code>
Penyelesaian JavaScript Tulen
Menggunakan acara onkeydown JavaScript ialah pendekatan lain untuk mengikat kekunci anak panah.
<code class="js">document.onkeydown = function(e) { switch (e.which) { case 37: // Left // Insert your left arrow key code break; case 38: // Up // Insert your up arrow key code break; case 39: // Right // Insert your right arrow key code break; case 40: // Down // Insert your down arrow key code break; } e.preventDefault(); };</code>
Keserasian Merentas Pelayar
Untuk keserasian dengan penyemak imbas lama seperti IE8, tambah e = e || tingkap.acara; suis(e.which || e.keyCode) { sebelum badan fungsi.
Penyelesaian Moden
KeyboardEvent.yang kini ditamatkan. Pendekatan yang lebih moden ialah menggunakan KeyboardEvent.key:
<code class="js">document.addEventListener('keydown', function(e) { switch (e.key) { case 'ArrowLeft': // Insert your left arrow key code break; case 'ArrowUp': // Insert your up arrow key code break; case 'ArrowRight': // Insert your right arrow key code break; case 'ArrowDown': // Insert your down arrow key code break; } e.preventDefault(); });</code>
Atas ialah kandungan terperinci Bagaimanakah cara saya Mengikat Kekunci Anak Panah dalam JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!