如何在 JavaScript/jQuery 處理箭頭鍵事件？

在Javascript/jQuery 中處理箭頭鍵事件

在Javascript 或jQuery 中使用鍵盤輸入時，可以將函數綁定到特定鍵對於控制使用者互動和提供響應式導航至關重要。在這種情況下，一個常見的挑戰是捕捉左右箭頭鍵事件。與普遍的看法相反，jQuery 的 js-hotkey 插件本身並不支援箭頭鍵綁定。

使用純Javascript

無需使用即可直接綁定外部庫，請考慮以下程式碼片段：

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

在此程式碼中，使用onkeydown 事件處理程序監視按鍵事件。箭頭鍵由其各自的值來標識（例如，37 表示左，39 表示右）。為了防止預設瀏覽器行為，例如滾動或插入符號移動，使用了 PreventDefault() 方法。

支援IE8

如果您需要支援Internet Explorer 8 ，它不支援which 屬性，您可以如下擴充程式碼：

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event; // IE8 compatibility
    switch(e.which || e.keyCode) {
        // ...
    }
};</code>

現代解決方案：KeyboardEvent.key

在現代瀏覽器中， KeyboardEvent.which 屬性已被棄用。若要使用更新的方法來偵測箭頭鍵，您可以使用 KeyboardEvent.key 屬性：

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

以上是如何在 JavaScript/jQuery 處理箭頭鍵事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！