Question

我希望能够使用键盘箭头移动ID为cube的div。左右移动均能正常进行，但我无法使其上下移动。

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var top=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;

    switch (key) {
      case 38:          //arrow up
        top = top - 10;
        cube.style.top= top + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        top = top + 10;
        cube.style.top= top + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

...

Answer 1

您不能有一个名为“ top”的全局变量。

top是一个宿主对象，它指向最外面的窗口对象，在框架内使用时最有用 https://humanwhocodes.com/blog/2007/06/03/javascript-variable-names-you-shouldn-t-use/

如果变量名称被更改，或者其作用域不是窗口（例如，在事件侦听器内部），则您的代码可以正常工作。

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var t=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;
    e.preventDefault(); // used to prevent window scroll on up/down keys

    switch (key) {
      case 38:          //arrow up
        t = t - 10;
        cube.style.top= t + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        t = t + 10;
        cube.style.top= t + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube {position: absolute}

<div id="cube">CUBE</div>
<div id="output">OUTPUT</div>

（请注意，运行上述代码时，您必须在代码段内单击以获取要达到的关键事件）

Answer 2

您可能只错过了position:absolute;的多维数据集div。

请参见下面的代码段

var output=document.getElementById("output");
var cube=document.getElementById("cube");
var left=0;
var topPx=0;

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;

    switch (key) {
      case 38:          //arrow up
        topPx = topPx - 10;
        cube.style.top= topPx + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        topPx = topPx + 10;
        cube.style.top= topPx + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube{
  width:100px;
  height:100px;
  background:red;
  position:absolute;
}

#output{
  float:right;
}

  <div id="cube">
  
  </div>
  <div id="output">
</div>

您可以here对其进行测试

Answer 3

首先，您的代码确实会左右移动多维数据集，但前提是您最初使用position:absolute或position:relative设置了多维数据集。除非您使用position将元素从该文档流中“释放”，否则您不能移动该文档流中的元素。

下一个问题是，您正在对top和left进行硬编码，而不是将它们设置为代表多维数据集当前位置的值。您需要将它们移动到事件处理程序内部，这也会更改它们的范围，如果是top（也是Global变量），则此范围更改将防止命名冲突。

此外，不要从top属性中获取left和.style的值，而是使用getComputedStyle()从最终的计算样式中获取它们，因为如果您的元素没有开头没有设置内联样式，style.top和style.left将返回undefined。

var output=document.getElementById("output");
var cube=document.getElementById("cube");

document.addEventListener("keydown", function(e) {
    output.innerHTML='Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    var key=e.which;
    
    // You need to move the cube relative to where it currently is
    // And, you should get the current style based on the final computed value, not the inline style
   var left= parseInt(getComputedStyle(cube).left);
   var top = parseInt(getComputedStyle(cube).top);

    switch (key) {
      case 38:          //arrow up
        top = top - 10;
        cube.style.top= top + "px";
        cube.style.background="green";
        break;
      case 40:          //arrow down
        top = top + 10;
        cube.style.top= top + "px";
        cube.style.background="#14B4AA";
        break;
      case 39:          //arrow right
        left = left + 10;
        cube.style.left= left + "px";
        cube.style.background="blue";
        break;
      case 37:         //arrow left
        left = left - 10;
        cube.style.left= left + "px";
        cube.style.background="brown";
        break;
    }
});

#cube { width:50px; height:50px; border:1px solid black; position:absolute; }

<div id="output"></div>
<div id="cube"></div>

使用键盘箭头向上和向下移动div

3 个答案: