Question

我写了一个荒谬的程序来演示我的问题。

应该怎么办

在输入字段中包含单词“ text”时按Enter键将显示消息“直到我准备好之前不要改变我”

等待再次按下Enter键，然后清除输入字段并显示消息“我在准备好之前就改变了您”

正在发生的事情

在输入字段中包含“文本”一词时按Enter键会触发两个事件。

**我尝试过的东西**

event.stopPropagation（）;
使用布尔变量根据需要添加和删除容器事件。

但是，都没有解决问题。

const inputField = document.querySelector('.inputField');
const inform = document.querySelector('.inform');
const container = document.querySelector('.container');

inputField.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
  /*event.stopPropagation();*/
    matchInput();
  }
});

function matchInput() {
  if (inputField.value === "text")
    inform.innerHTML = "Don't change me until i'm ready";

  window.addEventListener("keydown", nextInput);
};

function nextInput() {
  if (event.key === "Enter") {
    inputField.value = "";
    inform.innerHTML = "Ha I changed you before you were ready!";
    container.removeEventListener("keydown", nextInput);
  }
};

<div class="container">
  <input type="text" name="" value="text" autofocus class="inputField">
  <div class="inform">
 </div>

Answer 1

您正在让自己的生活变得艰难...（tio，teestáscomplicando la vida ...）。为什么不尝试仅使用一个事件处理程序：

inputField.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
     if (inputField.value === "text") inform.innerHTML = "Don't change me until i'm ready";
     else {
        inputField.value = "";
        inform.innerHTML = "Ha I changed you before you were ready!";
     }
  }
});

防止两个事件相互触发

1 个答案: