检测JavaScript中的方向键

我如何检测当一个方向键被按下?我用这个找到了答案:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

虽然它适用于所有其他键，但它不适用于方向键(可能是因为浏览器默认情况下应该在这些键上滚动)。

当前回答

我已经能够用jQuery捕获它们:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

示例:http://jsfiddle.net/AjKjU/

2011-04-08 15:14:46

其他回答

下面是一个示例实现:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

2015-01-17 23:42:59

我认为最新的方法是:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

这假设开发人员希望代码在页面的任何地方都是活动的，而客户端应该忽略任何其他按键。消除event.preventDefault();行if键按，包括被此处理程序捕获的键按，应该仍然是活动的。

2019-07-09 17:22:17

事件。钥匙== "ArrowRight"..

使用event.key。不再有任意的数字代码!如果您正在编译或知道您的用户都使用现代浏览器，请使用这个!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

详细的处理:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

现代开关处理:

const callback = {
    "ArrowLeft"  : leftHandler,
    "ArrowRight" : rightHandler,
    "ArrowUp"    : upHandler,
    "ArrowDown"  : downHandler,
}[event.key]
callback?.()

注意:旧属性(。keyCode和.which)已弃用。

“w”，“a”，“s”，“d”表示方向，使用event.code

为了支持使用非qwerty/English键盘布局的用户，您应该使用event.code。这将保留物理键的位置，即使导致字符发生变化。

事件。关键是，在德沃夏克和z在艾泽里，让你的游戏无法玩。

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

最理想的情况是，你还允许按键重新映射，无论玩家处于何种情况，这都对他们有利。

注:事件。箭头的代码也是一样的

关键Mozilla文档

代码Mozilla文档

支持的浏览器

2017-05-27 04:43:27

这是chrome和firefox的工作代码

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

2013-12-10 20:31:34

方向键只能由onkeydown触发，而不是onkeypress。

键码是:

左= 37 Up = 38 右= 39 下降= 40

2011-04-08 15:13:52

检测JavaScript中的方向键

推荐文章

最新文章

标签