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