鼠标点击有时会导致键盘输入,如何?

时间:2012-02-25 22:54:41

标签: javascript html events mouse

让我解释一下我的情况......我正在制作一个2D平台游戏,你可以在那里四处搜寻东西。四处走动使用W,A& D键和用鼠标完成拍摄。当我单独执行所有操作时,一切正常,但是当我单击鼠标按钮并同时按下某个键时,我的代码开始表现得好像仍然按下了键。这种情况有时只会发生。

我注册了所有键盘事件:

<body onload="init()" onkeydown="press(event);" onkeyup="release(event);">

以下是处理该问题的脚本:

var KEY = {W: 87, A: 65, S:83, D: 68, E: 69};

var input = {
    right: false,
    up: false,
    left: false,
    down: false,
    e: false
};

function press(evt) {
    var code = evt.keyCode;

    switch(code) 
    {
        case KEY.W: input.up = true; break;
        case KEY.A: input.left = true; break;
        case KEY.S: input.down = true; break;
        case KEY.D: input.right = true; break;
        case KEY.E: input.e = true; break;
    }
}

function release(evt)
{
    var code = evt.keyCode; 
    input.code = code;

    switch(code) 
    {
        case KEY.W: input.up = false; break;
        case KEY.A: input.left = false; break;
        case KEY.S: input.down = false; break;
        case KEY.D: input.right = false; break;        
        case KEY.E: input.e = false; break;
    }
}

即使我没有注册鼠标事件,也会发生这种情况。有人可以解释原因吗?我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

<强> EDITED

似乎偶尔也不会出现生涩行为。如果您按住并保持left,然后按up并释放left,则移动将继续。但是,如果您在一段时间后释放up,则移动将停止。 IE浏览器。你可以进行连续的圆周运动,但你无法回到原来的方向。这可能是事件处理过程,使用堆栈类型保存事件调用及其返回点。

下面是一个示例代码,它可以解决问题。它使用箭头键移动点。为清晰起见,代码位于全局空间,仅适用于IE,但您只需按照自己的意愿编辑它。

<html>
<head>
<script>
function move(elem){
    if(i[37])elem.style.left=elem.style.pixelLeft-2;
    if(i[38])elem.style.top=elem.style.pixelTop-2;
    if(i[39])elem.style.left=elem.style.pixelLeft+2;
    if(i[40])elem.style.top=elem.style.pixelTop+2;
    return;
}   

function keyDn(){
    var key=window.event.keyCode;
    if(i[key]!==undefined) i[key]=true;
    return;
}

function keyUp(){
    var key=window.event.keyCode;
    if(i[key]!==undefined) i[key]=false;
    return;
}

window.onload=function (){
    spot=document.getElementById('movablespot');
    i={'37':false,'38':false,'39':false,'40':false};
    document.body.onkeydown=keyDn;
    document.body.onkeyup=keyUp;    
    a=setInterval(function (){move(spot);return;},5);
}    
</script>
</head>
<body>
<span id="movablespot" style="position:absolute;top:100px;left:100px;">O</span>
</body>
</html>