Question

我正在尝试编写一个脚本，使用箭头键和Javascript eventlistener将橙色框移动到蓝色框内。当我运行页面时，没有任何反应。我已经尝试在控制台中探索，但它根本没有给我任何输出。我确定我错过了一些小事，但我不能为我的生活弄清楚。任何建议都会很棒！

var orange = document.getElementById("orange");
orange.addEventListener("onkeydown", move, false);
function move(e);
    			
e = e || window.event;
    
   if(e.keyCode == '38'){ //up
    	if(parseInt(orange.style.top) > '0'){
    		orange.style.top = parseInt(orange.style.top) - 5;
    	}
   } else if (e.keyCode == '40'){ //down
    	if(parseInt(orange.style.top) < '425'){
    		orange.style.top = parseInt(orange.style.top) + 5;
    	}
   } else if (e.keyCode == '37'){ //left
    	if(parseInt(orange.style.top) > '0'){
    		orange.style.left = parseInt(orange.style.left) - 5;
    	}
   } else if (e.keyCode == '39') { //right
    	if(parseInt(orange.style.left) < '425') {
    		orange.style.left = parseInt(orange.style.left) + 5;
    	}    
   }
}

#blue{
    background-color: blue;
    position: relative;
    height: 500px;
    width: 500px
}
#orange{
    background-color: orange;
    position: absolute;
    width: 75px;
    height: 75px;
};

 <div id="blue">
     <div id ="orange" style="left: 30px; top:30px;"></div>
 </div>

Answer 1

您应该在控制台中收到语法错误，因为您未正确声明move功能。

function move(e);

    e = e || window.event;

应如下所示：

function move(e) {

        e = e || window.event;

Answer 2

你有几个问题：

1）事件为keydown而非onkeydown（除非您直接添加到对象:(例如orange.onkeydown）

2）Top以像素为单位，而不仅仅是整数 - 您需要将+ 'px'添加到您的热门更改中：orange.style.top = parseInt(orange.style.top) + 5 + 'px'

其他说明：

可能会更好地将事件监听器放在窗口上，因为它会有焦点，虽然idk没有测试。
e.keyCode是一个数字，而不是一个字符串
如@bmceldowney所述，您的函数声明中存在语法错误

代码的工作版本：https://jsfiddle.net/kkhkL065/

Answer 3

正如Mozilla在this documentation page中所述， keydown 事件的可能目标（不是 onkeydown 错误地写在您的代码中）

聚焦元素处理关键事件，根元素如果不合适输入元素集中

所以基本上只有输入（<input>和<textarea>）或根元素（文档或窗口）才能处理事件。

像这样修改你的代码：

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

这是指向JSFiddle的链接：https://jsfiddle.net/nbj0Lujw/

希望有所帮助：）

为什么javascript addEventListener没有做任何事情？

3 个答案: