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

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 添加边距，即额外的在它周围留出空间，从而将它朝你想要的相反方向移动；你应该简单地使用 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/