Heim >Web-Frontend >js-Tutorial >Wie gehe ich mit Pfeiltastenereignissen in JavaScript/jQuery um?
Beim Arbeiten mit Tastatureingaben in Javascript oder jQuery können Funktionen an bestimmte Tasten gebunden werden entscheidend für die Steuerung von Benutzerinteraktionen und die Bereitstellung einer reaktionsfähigen Navigation sein. In diesem Zusammenhang besteht eine häufige Herausforderung darin, Ereignisse der linken und rechten Pfeiltaste zu erfassen. Entgegen der landläufigen Meinung unterstützt das js-hotkey-Plugin für jQuery nicht nativ die Pfeiltastenbindung.
Für eine einfache Bindung ohne die Verwendung von Betrachten Sie für externe Bibliotheken den folgenden Codeausschnitt:
<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>
In diesem Code werden Schlüsselereignisse mithilfe des onkeydown-Ereignishandlers überwacht. Pfeiltasten werden durch ihre jeweiligen Werte identifiziert (z. B. 37 für links, 39 für rechts). Um Standardverhalten des Browsers wie Scrollen oder Cursorbewegungen zu verhindern, wird die Methode „preventDefault()“ verwendet.
Wenn Sie Internet Explorer 8 unterstützen müssen , das die Eigenschaft „which“ nicht unterstützt, können Sie den Code wie folgt erweitern:
<code class="javascript">document.onkeydown = function(e) { e = e || window.event; // IE8 compatibility switch(e.which || e.keyCode) { // ... } };</code>
In modernen Browsern Die Eigenschaft „KeyboardEvent.which“ ist veraltet. Für einen aktuelleren Ansatz zur Erkennung von Pfeiltasten können Sie stattdessen die Eigenschaft KeyboardEvent.key verwenden:
<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>
Das obige ist der detaillierte Inhalt vonWie gehe ich mit Pfeiltastenereignissen in JavaScript/jQuery um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!