javascript - 如何阻止 keydown 事件被卡住？

Question

我希望下面列出的程序的行为如下:

1. 我点击输入。
2. 我按 Enter 键。
3. 出现“再次按 Enter”行。
4. 我通过单击页面上的某个位置来退出输入。
5. 我按 Enter 键。
6. 然后出现“您已按 Enter 2 次”这一行。

该程序的真实行为:

1. 我点击输入。
2. 我按 Enter 键。
3. 出现“再次按 Enter 键”和“您已按 Enter 两次”行。

我有 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 时，该事件将通过 a 向上传播这个过程称为事件冒泡(因为气泡上升)。

因此，文档上的第二个事件监听器被执行。

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