JavaScript:"；onkeydown“；及；onkeypress"；_Javascript

JavaScript:"；onkeydown“；及；onkeypress"；

javascript

JavaScript:"；onkeydown“；及；onkeypress"；,javascript,Javascript,我想捕捉onkeydown事件来移动一个方框，但当我不断按键时，存在延迟，即当我不断按键时，方框会在一段时间后移动。请帮助我消除延迟。 <html> <head> <style> .box { width: 100px; height: 100px; background: #ccc; position: absolute;

我想捕捉onkeydown事件来移动一个方框，但当我不断按键时，存在延迟，即当我不断按键时，方框会在一段时间后移动。请帮助我消除延迟。


<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .clear {
            clear: both;
        }
        p {
            margin-top: 100px;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

    <div class="box"></div>
    <div class="clear"></div>
    <p> Press Space Bar</p>

    <script type="text/javascript">

        $(document).ready(function(){
            console.log("ready");

        });

        $(document).on('keydown', function(event){

            var code = event.keyCode;

            if (code == 32) {

                var div = $('.box');

                var left = div.position().left;

                var new_left = left + 1;
                console.log(new_left);
                div.css({
                    'left': new_left + "px"
                });

            }

        });

    </script>

</body>
</html>

.盒子{
宽度：100px；
高度：100px；
背景：#ccc；
位置：绝对位置；
顶部：0px；
左：0px；
}
.清楚{
明确：两者皆有；
}
p{
边缘顶部：100px；
}
按空格键
$（文档）.ready（函数（）{
控制台日志（“就绪”）；
});
$（文档）.on（'keydown'，函数（事件）{
var代码=event.keyCode；
如果（代码==32）{
var div=$（'.box'）；
var left=div.position（）.left；
var new_left=左+1；
控制台日志（新的左）；
div.css({
“左”：新的_左+“px”
});
}
});

也许这能给你一点帮助。

如果我理解正确，请尝试console.log登录事件。我相信您所指的延迟可能是键盘的默认功能。例如，如果打开文本编辑器并按住空格键，您会注意到它将执行以下操作：

（移过去一点）（等等）（开始移动）

键盘事件也以这种方式工作。如果定义将长方体移动到类似的位置：

document.addEventListener("keydown", function(e) { 
    var key = e.which;
    if( key == 37 ) X -= speed;
    if( key == 38 ) Y -= speed;   
    if( key == 39 ) X += speed;
    if( key == 40 ) Y += speed;   
});

你会注意到这种“打字机”式的行为。要解决此问题，您可以使用布尔值来检测何时按下某个键（

true

），然后检测何时松开按下的键（

false

）。在屏幕更新功能中，检查这些布尔值是否移动

var LEFT = false , RIGHT = false, UP = false, DOWN = false;
...

document.addEventListener("keydown", function(e) { 
    var key = e.which;
    if( key == 37 ) LEFT = true;
    if( key == 38 ) UP = true;   
    if( key == 39 ) RIGHT = true;
    if( key == 40 ) DOWN = true;   
});
document.addEventListener("keyup", function(e) { 
    var key = e.which;
    if( key == 37 ) LEFT = false;
    if( key == 38 ) UP = false;     
    if( key == 39 ) RIGHT = false;
    if( key == 40 ) DOWN = false;   
});

...

// In update function

    if( LEFT ) X -= speed;
    if( UP ) Y -= speed;   
    if( RIGHT ) X += speed;
    if( DOWN ) Y += speed;

请注意，在第二个示例中，移动更加平滑。

添加HTML和Javascript代码。除非我们知道我们正在处理的是什么，否则我们无法提供帮助。你应该提供一个代码或一把小提琴。通过发布你的尝试来解释更多，以避免系统被“否决”。这就是我想要的！！非常感谢。谢谢你的帮助，但这并不能解决我的问题。谢谢。