首頁 > web前端 > js教程 > 主體

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

Susan Sarandon
發布: 2024-10-30 17:26:02
原創
364 人瀏覽過

How to Handle Arrow Key Events in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!