События 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