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