javascript - 多按键无法使用 JS 正常工作

标签 javascript html css

这段代码可以直接从浏览器窗口接受两个输入,如果我按 q 4000 加 1 当按下 w 3000 加 1,当两者按下都增加了。但是 当我按下其中一个时,让我们说 q w 应该继续工作但没有,两者都停止了。 任何解决方案!?是我的逻辑错误还是 keydown 就是这样工作的。tnx。

HTML:

<div id="num1">3000</div>
<div id="num2">4000</div>
<div >w =<span id="w"></span></div>
<div >q =<span id="q"></span></div>
<div>Last raised key=<span id="deleted"></span></div>

JS:

<script>
    keylogger={};

    window.addEventListener("keydown",function(e){
        keylogger[e.key]=true;
        document.getElementById("w").innerHTML=keylogger['w'];
        document.getElementById("q").innerHTML=keylogger['q'];
        div1=document.getElementById("num1") ;
        div2=document.getElementById("num2") ;

        if(keylogger['w'] && keylogger['q']){
            value=parseInt(div1.innerHTML);
            div1.innerHTML=++div1.innerHTML;
            value=parseInt(div2.innerHTML);
            div2.innerHTML=++div2.innerHTML;
        }
        if(keylogger['w']){
            value=parseInt(div1.innerHTML);
            div1.innerHTML=++div1.innerHTML;
        }
        if(keylogger['q']){

            value=parseInt(div2.innerHTML);
            div2.innerHTML=++div2.innerHTML;
        }
    });
    window.addEventListener("keyup",function(e){
        document.getElementById("deleted").innerHTML=e.key;
        delete keylogger[e.key];
    })


</script>

最佳答案

肮脏的解决方案: 获取此代码并运行它。它会起作用,但你需要清理它。您的代码无法正常工作的原因是,当您释放一个键(按下两个键时),事件就会中止,这就是您无法继续的原因。

更好解决方案的提示: 该解决方案有效。然而,这并不好。如果你想让它更好,你应该 将 setInterval 函数分配给一个变量,并在 addEventListener“keydown”中调用它。在那个地方你应该确保只初始化一次(检查它之前是否已经初始化过)。如果已经初始化/正在运行,请不要做任何事情。

然后在 addEventListener“keyup”上,您应该使用 clearInterval 删除变量函数,这样您就不会在不需要时运行 setInterval。

请注意,在您的情况下,您将有两个变量。 w 和 q 您分配的 setInterval 函数。也许在数组中,就像您使用 keyLogger = {}/[] 所做的那样。

脏代码:

<html>
<head><title>2 key press</title></head>
<body>
<div id="num1">3000</div>
<div id="num2">4000</div>
<div >w =<span id="w"></span></div>
<div >q =<span id="q"></span></div>
<div>Last raised key=<span id="deleted"></span></div>
<script>
keylogger={};

window.addEventListener("keydown",function(e){
    keylogger[e.key]=true;
    setKeyLogger();
});

window.addEventListener("keyup",function(e){
    document.getElementById("deleted").innerHTML=e.key;
    delete keylogger[e.key];
    setKeyLogger();
})

function setKeyLogger() { 
    document.getElementById("w").innerHTML=keylogger['w'];
    document.getElementById("q").innerHTML=keylogger['q'];
}

setInterval(function(){
    div1=document.getElementById("num1") ;
    div2=document.getElementById("num2") ;

    if(keylogger['w'] && keylogger['q']){
        value=parseInt(div1.innerHTML);
        div1.innerHTML=++div1.innerHTML;
        value=parseInt(div2.innerHTML);
        div2.innerHTML=++div2.innerHTML;
    }
    else if(keylogger['w']){
        value=parseInt(div1.innerHTML);
        div1.innerHTML=++div1.innerHTML;
    }
    else if(keylogger['q']){
        value=parseInt(div2.innerHTML);
        div2.innerHTML=++div2.innerHTML;
    }
 }, 250);

</script>
</body>
</html>

关于javascript - 多按键无法使用 JS 正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59520881/

相关文章:

javascript - jqgrid - 如何在内联编辑模式下将参数添加到 saveRow 的 extraparam

javascript - 主干 - 模型中的对象数组?

javascript - 如何在angular4项目中导入angular2-cookie

javascript - 绝对定位元素的视差滚动问题

html - Bootstrap 列的高度相等不起作用

javascript - 如何重构这个多重嵌套的 if else block

javascript - 如何在 Blogger 中的下拉菜单中添加子菜单

javascript - 如何用父对象或字段包装 JSON 对象?

jquery - 动画 div 高度的困难

javascript - 如何更改 DataTables 上的 sLengthMenu 位置?