Wie gehe ich mit Pfeiltastenereignissen in JavaScript/jQuery um?

Verarbeiten von Pfeiltastenereignissen in Javascript/jQuery

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.

Verwendung von einfachem Javascript

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.

Unterstützt IE8

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>

Moderne Lösung: KeyboardEvent.key

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!