JavaScript移动对象

Question

我有一个移动DOM对象的脚本，但它不起作用，我认为在我的keydown国家有问题，我试图添加/减去，但什么都没发生。有人能解释一下原因吗？

mouse.setAttribute('tabindex', '0')
alert(typeof(+mouse.style.left));
mouse.addEventListener('click', (event) => {
mouse.style.position = 'fixed';
mouse.style.left = mouse.getBoundingClientRect().left + 'px';
mouse.style.top = mouse.getBoundingClientRect().top + 'px';
})
mouse.addEventListener ('focus', (event) =>  {
mouse.addEventListener('keydown', (event) => {
if (event.keyCode == 37){
console.log('left');
let left = +mouse.style.left
mouse.style.left = left - 20 + 'px';
}
if (event.keyCode == 38){
console.log('up');
let up = +mouse.style.top;
mouse.style.top = up - 20 + 'px';
}
if (event.keyCode == 39){
console.log('right');
let right = +mouse.style.left
mouse.style.left = right +  20 + 'px';
}
if (event.keyCode == 40){
console.log('down');
let down = +mouse.style.top
mouse.style.top = down + 20 + 'px';
}
})  
})


</script>

Answer 1

+不会将'20px'等字符串解析为20。正如评论中提到的，您需要将样式解析为一个数字。这意味着使用诸如parseInt之类的函数，如下所示。

此外，在事件处理程序中注册事件处理程序可能不会得到您想要的结果。特别是：如果将div聚焦两次，则事件处理程序将运行两次。

var mouse = document.getElementById('mouse');
mouse.setAttribute('tabindex', '0')
mouse.addEventListener('click', (event) => {
mouse.style.position = 'fixed';
mouse.style.left = mouse.getBoundingClientRect().left + 'px';
mouse.style.top = mouse.getBoundingClientRect().top + 'px';
})
mouse.addEventListener ('focus', (event) =>  {
mouse.addEventListener('keydown', (event) => {
if (event.keyCode == 37){
console.log('left');
let left = parseInt(mouse.style.left)
mouse.style.left = left - 20 + 'px';
}
if (event.keyCode == 38){
console.log('up');
let up = parseInt(mouse.style.top);
mouse.style.top = up - 20 + 'px';
}
if (event.keyCode == 39){
console.log('right');
let right = parseInt(mouse.style.left)
mouse.style.left = right +  20 + 'px';
}
if (event.keyCode == 40){
console.log('down');
let down = parseInt(mouse.style.top)
mouse.style.top = down + 20 + 'px';
}
})  
})

<div id="mouse" style="background-color: yellow">Hi</div>