基于关键代码的事件侦听器无法使用边距正确移动框

Question

我编写的脚本有问题，该脚本允许 ID 为 me 的元素根据箭头键移动，但无论何时告诉它向左移动，它都会向右移动，当告诉它向右移动时它走对了，当被告知上升或下降时它不会移动。

这是脚本：

document.onkeydown = function(event) {
    var kc = event.keyCode;
    var me = document.getElementById('me');

    me.innerHTML = kc;

    var XPos = me.offsetLeft;
    var YPos = me.offsetTop;

    if (kc == '39') {
        me.style.marginLeft = XPos++ + 'px';
    }
    if (kc == '37') {
        me.style.marginLeft = XPos-- + 'px';
    }
    if (kc == '38') {
        me.style.marginTop = YPos-- + 'px';
    }
    if (kc == '40') {
        me.style.marginTop = YPos++ + 'px';
    }
};

正在演示 this website。

Answer 1

你的代码有两个错误：

您正在尝试使用 marginLeft / marginTop 设置方框的位置 – 顾名思义，这会向 div 添加边距，即在它周围增加 space，从而将它朝您想要的相反方向移动；你应该简单地使用 left 和 top
通过使用例如XPos++，你得到的是 XPos 的旧值，然后然后你增加了它的值；你应该使用 ++XPos 来代替，这样，在你使用它之前值会增加

这是您的代码的更新版本：

document.onkeydown = function(event) {
    var kc = event.keyCode;
    var me = document.getElementById('me');
    me.innerHTML = kc;
    var XPos = me.offsetLeft;
    var YPos = me.offsetTop;
    if (kc == '39') {
        me.style.left = ++XPos + 'px';
    }
    if (kc == '37') {
        me.style.left = --XPos + 'px';
    }
    if (kc == '38') {
        me.style.top = --YPos + 'px';
    }
    if (kc == '40') {
        me.style.top = ++YPos + 'px';
    }
};

#me {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

<div id="me"></div>

参见 JSFiddle：https://jsfiddle.net/pahund/sovxsh22/

基于关键代码的事件侦听器无法使用边距正确移动框

Key code based event listener doesn’t move box correctly, using margins

html

javascript

margin