События DOM не запускаются после отключения элемента в Firefox

Я разрабатываю простую игру, в которой пользователь нажимает кнопку "Пуск", кнопка отключается, и после этого пользователь выполняет некоторые действия на холсте с помощью клавиш со стрелками. Он работает, как и ожидалось в Chrome, но я наблюдал странное поведение в Firefox. А именно, после отключения кнопки события 'keydown' не запускаются на странице, пока я не щелкну где-нибудь на ней. Похоже, после отключения кнопки страница теряет фокус или что-то.

Соответствует ли это поведение спецификациям или это ошибка диспетчеризации событий Firefox DOM?

Firefox 64.0, Ubuntu

const button = document.querySelector('button');
const canva = document.querySelector('.canva');
const doc = document.documentElement;

doc.addEventListener('keydown', evt => {
  canva.innerHTML = evt.key;
});

button.addEventListener('click', evt => {
  button.disabled = true;
});
body {
  font-family: sans-serif;
  margin: 0;
  background-color: #F4511E;
}

button {
  display: block;
  text-align: center;
  width: 100px;
  margin: 10px auto;
}

.canva {
  background-color: white;
  width: 200px;
  height: 200px;
  margin: auto;

  font-size: 1.5em;
  font-weight: bald;
  line-height: 200px;
  text-align: center;
}
<!doctype html>
<html>
<head>
  <title>Lost events</title>
  <meta charset="UTF-8">
</head>
<body>
  <button>Start</button>
  <div class="canva"></div>
</body>
</html>

1 ответ

Решение

Кнопка получает фокус и становится document.activeElement после клика. После отключения автоматически blur()в Chrome, но в Firefox activeElement и ест события, как черная дыра. Итак, нужно явно вызвать document.activeElement.blur() после отключения activeElement

Спасибо @Kaiido за его комментарий

В багтрекере Firefox есть проблема, связанная с этим https://bugzilla.mozilla.org/show_bug.cgi?id=706773

Другие вопросы по тегам