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

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

DDD
發布: 2024-10-30 03:58:02
原創
706 人瀏覽過

How do I Bind Arrow Keys in JavaScript and jQuery?

JavaScript 和 jQuery 中的按鍵綁定箭頭鍵

增強使用者互動通常需要將功能綁定到特定鍵。箭頭鍵通常用於導航,但將它們整合到 JavaScript 和 jQuery 中可能是一個挑戰。

jQuery 解決方案

雖然 js-hotkey 插件提供了增強的鍵綁定功能,它缺乏對箭頭鍵的支援。然而,jQuery 的 keydown 事件處理程序提供了另一種解決方案。

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>
登入後複製

純 JavaScript 解決方案

利用 JavaScript 的 onkeydown 事件是綁定箭頭鍵的另一種方法。

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>
登入後複製

跨瀏覽器相容性

為了相容於IE8 等舊版瀏覽器,請新增e = e ||視窗.事件; switch(e.which || e.keyCode) { 在函數體之前。

現代化解決方案

KeyboardEvent.which 現已棄用。更現代的方法是使用 KeyboardEvent.key:

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>
登入後複製

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

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