Итерация forEach l oop в vanilla JS не работает для события нажатия клавиши, но отлично работает для события щелчка - PullRequest
Новая
       6

Итерация forEach l oop в vanilla JS не работает для события нажатия клавиши, но отлично работает для события щелчка

0 голосов
/ 28 мая 2020

Я отправляю пользователю poke-сообщение socket.IO, и в приведенном ниже коде я достиг только (onclick частей), и он работал так, как должен, но понятия не имел, что не так с частью клавиатуры ... Кроме того, пробовал событие keydown, но не сработало. Я не хочу делать это, передавая объявление функции событию как arg, но как анонимную функцию и лучше понимать, что происходит за сценой. Буду признателен за любую помощь или подсказку. 

["keyup", "click"].forEach(
  (evt) =>
    document
      .getElementById(eachUser.buttonElement)
      .addEventListener(evt, () => {
        if ((evt === "keyup" && evt.keyCode === 13) || evt === "click") {
          const pokeMessage = document.getElementById(eachUser.inputElement)
            .value;
          private_socket.emit("poke message", {
            username: user.name,
            sessionID: user.sessionID,
            pokeMessage: pokeMessage,
          });
          pokeUser.parentNode.removeChild(pokeUser);
        } else {
          return;
        }
      }),
  false
);

1 Ответ

0 голосов
/ 29 мая 2020

Проблема в том, что вы перепутали переменную evt, исходящую из вашего forEach l oop, с объектом Event, который ваш код получил в качестве аргумента, но не принял.

В вашем code, evt - это имя события, для которого был добавлен текущий вызываемый слушатель ("keyup" или "click").

Когда вы оцениваете evt.keyCode, оно возвращает undefined (ни строк имени события имеют свойство keyCode), и ваш код перестает работать.

Вместо этого вы, вероятно, хотели получить доступ к свойству keyCode текущего события, к которому вы можете обращаться как к параметру в событии слушатель: 

["keyup", "click"].forEach(
  (eventName) =>
// ^^^^^^^^^--- Renamed for clarity
    document
      .getElementById(eachUser.buttonElement)
      .addEventListener(eventName, eventObj => {
                          // ^^^^^^^^--- take argument (and name it whatever you want)
        if ((eventName === "keyup" && eventObj.keyCode === 13) || eventName === "click") {
          const pokeMessage = document.getElementById(eachUser.inputElement)
            .value;
          private_socket.emit("poke message", {
            username: user.name,
            sessionID: user.sessionID,
            pokeMessage: pokeMessage,
          });
          pokeUser.parentNode.removeChild(pokeUser);
        } else {
          return;
        }
      }),
  false
);
...