Question

我正在开发一个简单的游戏，其中用户单击“开始”按钮，该按钮被禁用，然后该用户使用箭头键盘在画布上执行某些操作。它可以在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>

Answer 1

按钮获得焦点，单击后变为document.activeElement。停用之后，它会在Chrome中自动blur()编辑，但在Firefox中它仍然是activeElement，并且会吞噬黑洞。因此，有必要在禁用document.activeElement.blur()

之后显式调用activeElement

感谢@Kaiido的评论

Firefox Bugtracker中存在一个与此有关的问题 https://bugzilla.mozilla.org/show_bug.cgi?id=706773

在Firefox中禁用元素后，不会触发DOM事件

1 个答案: