Как остановить застревание события нажатия клавиш? - PullRequest
Новая
       48

Как остановить застревание события нажатия клавиш?

0 голосов
/ 25 мая 2019

Я ожидаю, что поведение программы, указанной ниже, будет таким:

  1. Я нажимаю на вход.
  2. Я нажимаю Enter.
  3. Появляется строка «Нажмите Enter еще раз».
  4. Я выхожу из ввода, нажимая где-нибудь на странице.
  5. Я нажимаю Enter.
  6. Затем появляется строка «Вы нажали Enter 2 раза».

Реальное поведение этой программы:

  1. Я нажимаю на вход.
  2. Я нажимаю Enter.
  3. Появятся строки «Нажмите 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);

Ответы [ 2 ]

1 голос
/ 25 мая 2019

Давайте разберемся с этим.Происходит то, что ваше условие 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);

Вы можете попробовать это здесь .Вы можете изменить это по своему вкусу.:)

Имея в виду ваш исходный код, здесь - это обновленная версия.

Чтобы понять, как работает этот бит, все просто: когда естьсобытие в элементе a, а оболочка для этого элемента - b, событие проходит через процесс, известный как пузыри событий (потому что пузыри поднимаются вверх ).

В связи с этимпрослушиватель второго события на document выполняется.

Чтобы этого не произошло, вы можете использовать .stopPropagation() для объекта event.

0 голосов
/ 25 мая 2019

Здесь произошло несколько вещей.Вы дважды подключали прослушиватель, второй раз на весь документ, и это событие сразу же вызывалось, когда событие всплыло.Вам также не нужно было использовать два разных элемента для сообщения, если вы отслеживаете нажатие клавиши ввода.Вы также должны использовать 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

...