如何在 JavaScript 和 jQuery 中綁定箭頭鍵？

在JavaScript 中綁定箭頭鍵

在某些應用程式中，需要將某些功能綁定到鍵盤上的特定按鍵，例如方向鍵。在本文中，我們將探討如何在 JavaScript 和 jQuery 中綁定箭頭鍵，並專注於左右箭頭。

使用標準 JavaScript

最簡單的方法在普通 JavaScript 中處理按鍵事件是透過 document.onkeydown 事件監聽器。透過向該事件附加一個函數，我們可以檢查按下的鍵的鍵碼，該鍵碼對應於鍵盤上的實體鍵。以下是一個範例：

<code class="js">document.onkeydown = function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

使用 jQuery

jQuery 提供了更簡潔、方便的方式來綁定事件監聽器。與先前的方法類似，我們可以使用keydown 事件來偵測箭頭鍵按下：

<code class="js">$(document).on("keydown", function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
});</code>

IE8 相容性

對於IE8 等不支援的瀏覽器事件物件的哪個屬性，我們可以使用以下程式碼：

<code class="js">e = e || window.event;
switch (e.which || e.keyCode) {
  case 37: // Left arrow
    // Do something
    break;

  case 39: // Right arrow
    // Do something else
    break;
}</code>

按鍵碼注意事項

這裡使用的按鍵碼（37和39）對應分別為向左和向右箭頭鍵。您可以在官方 JavaScript 或 jQuery 文件網站上找到其他鍵的鍵碼。

現代 JavaScript

在最新版本的 JavaScript 中，which 屬性已被棄用支援KeyboardEvent.key。以下是使用 KeyboardEvent.key 的更新範例：

<code class="js">document.onkeydown = function(e) {
  switch (e.key) {
    case "ArrowLeft": // Left arrow
      // Do something
      break;

    case "ArrowRight": // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

透過實作這些方法，您可以輕鬆地將特定功能綁定到左右箭頭鍵，從而在應用程式中實現高效的鍵盤互動。

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