javascript - 键盘交互后未立即注册鼠标单击

问题描述

我正在尝试创建一个自定义复选框。我已经处理了空格键的 click 和 onkeypress 。它工作正常，但是如果我在按下空格键后尝试单击它，则鼠标单击未注册。

比如这一系列事件：

单击->选中
单击->取消选中
onkeypress -> 选中
onkeypress-> 取消选中
单击 -> 未注册
单击->选中

这不是第一次点击没有注册，只有当我按下空格键后太快点击时才注册。

我也用默认的 html 复选框检查了它，它也有同样的问题。

我并不是专门寻找解决方案，因为这种情况实际上不会发生，而是原因。有人知道这是什么原因吗？似乎 onkeypress 事件处理程序不会立即返回，因此主线程被阻塞并且没有捕获任何交互。

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox: <input type="checkbox" id="myCheck"  onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

</body>
</html>

我正在 Windows 上的 Chrome v71 中对此进行测试。

标签： javascripthtml

javascript - 键盘交互后未立即注册鼠标单击

问题描述

解决方案

推荐阅读