如何在 JavaScript 和 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中文网其他相关文章！