Question

我希望下面列出的程序的行为是这样的：

我单击输入。
我按Enter。
出现“再次按Enter键”行。
我通过单击页面上的某个地方来取消输入。
我按Enter。
然后出现“您已按Enter 2次”行。

该程序的实际行为：

我单击输入。
我按Enter。
出现“再次按Enter键”和“您已按Enter 2次”行。

我有2个问题：

1）原因是什么？我只按过Enter键一次。 2）如何使该程序按我期望的方式运行？

let input = document.createElement("input");
input.value = "Click on this field and press Enter";
input.addEventListener("keydown", function(){
    if(event.keyCode === 13){
        let div2 = document.createElement("div");
        div2.innerHTML = "Press Enter once again";
        document.addEventListener("keydown", function(){
            if(event.keyCode === 13){
                let div3 = document.createElement("div");
                div3.innerHTML = "You have pressed Enter 2 times";
                document.body.appendChild(div3);
            }
        });
        document.body.appendChild(div2);    
    }
});
document.body.appendChild(input);

Answer 1

让我们分解一下。发生的是，您的if条件正在立即检查是否按下了该键，因此e.keyCode始终为13。

解决此问题的最简单方法是使用以下代码：

let input = document.createElement("input");
let isPressed = false;
input.value = "Click on this field and press Enter";
document.addEventListener("keydown", function(e) {
  if (event.keyCode === 13 && isPressed) {
    let div3 = document.createElement("div");
    div3.innerHTML = "You have pressed Enter 2 times";
    document.body.appendChild(div3);
  }
});
input.addEventListener("keydown", function(e){
    event.stopPropagation()
    if(event.keyCode === 13){
        if ( isPressed ) {
          return;
        } else {
          let div2 = document.createElement("div");
          div2.innerHTML = "Press Enter once again";
          isPressed = true;
          document.body.appendChild(div2); 
        }   
    }
});
document.body.appendChild(input);

您可以尝试here。您可以根据自己的喜好进行折光。：）

请牢记原始代码，here是更新版本。

要了解该位的工作原理，方法很简单：当元素a中有一个事件并且该元素的包装器为b时，该事件将通过一个称为事件冒泡的过程向上传播（因为气泡上升了）。

因此，document上的第二个事件侦听器被执行。

要阻止这种情况发生，可以在.stopPropagation()对象上使用event。

Answer 2

这里发生了几件事。您将侦听器附加了两次，第二次附加在整个文档上，然后在事件冒泡时立即触发此事件。如果您要跟踪是否按下了回车键，则也不需要为消息使用两个不同的元素。出于安全原因，您还应该在textContent上使用innerHTML：）

这是重写的代码

let enterHasBeenPressed = false;

let input = document.createElement("input");
input.value = "Click on this field and press Enter";
input.addEventListener("keydown", function(){
    if(event.keyCode === 13){
        onEnterPressed();
    }
});
document.body.appendChild(input);

let text = document.createElement("div");
document.body.appendChild(text);

function onEnterPressed() {
    if (!enterHasBeenPressed) {
        text.textContent = "Press Enter once again";
        enterHasBeenPressed = true;
        return;
    }

    text.textContent = "You have pressed Enter 2 times";
}

https://codepen.io/anon/pen/wbjojR

如何停止按键事件被卡住？

2 个答案: