我正在开发一个简单的游戏，用户单击"开始"按钮，该按钮被禁用，然后用户使用箭头键盘在画布上执行一些操作。它在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>按钮获得焦点，点击后变为document.activeElement。禁用后，它在Chrome中自动被blur()-ed，但在Firefox中，它仍然是activeElement，并像黑洞一样吞噬事件。因此，有必要在禁用activeElement后显式调用document.activeElement.blur()
感谢@Kaiido的评论
Firefox错误跟踪器中有一个问题https://bugzilla.mozilla.org/show_bug.cgi?id=706773