javascript 交替按压和释放时onkeyup和onkeydown干扰

wooyq4lh 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(226)

序列
1.按住Shift键以外键（例如Alt键），
1.按住Shift键，
1.释放自步骤1以来保持的密钥，
1.释放Shift，
导致“other key”保留颜色，就像= 'none'行没有运行一样。
实际上，这里的GIF显示了与上述4个动作相对应的行为：

正如您所看到的，“Alt up”消息没有打印出来，但是请相信我，我在按住Shifrt和释放Shift之间释放了Alt。
现在，我正在尝试另一个系统Shift不是唯一的，我可以得到相同的Ctrl键（另一个键是例如4个箭头之一）。
为什么会这样？这是不可避免的吗？

window.onkeydown = listenKeyDown;
window.onkeyup = listenKeyUp;

function listenKeyDown(e) {
  console.log(e.key + " down")
  if (e.altKey) {
    document.getElementById('alt').style.background = '#00ff00';
  }
  if (e.ctrlKey) {
    document.getElementById('ctrl').style.background = '#00ff00';
  }
  if (e.shiftKey) {
    document.getElementById('shift').style.background = '#00ff00';
  }
  let elem = document.getElementById(e.key);
  if (elem && !e.altKey && !e.ctrlKey && !e.shiftKey) {
    elem.style.background = '#00ff00';
  }
}

function listenKeyUp(e) {
  console.log(e.key + " up")
  if (e.altKey) {
    document.getElementById('alt').style.background = 'none';
  }
  if (e.ctrlKey) {
    document.getElementById('ctrl').style.background = 'none';
  }
  if (e.shiftKey) {
    document.getElementById('shift').style.background = 'none';
  }
  let elem = document.getElementById(e.key);
  if (elem && !e.altKey && !e.ctrlKey && !e.shiftKey) {
    document.getElementById(e.key).style.background = 'none';
  }
}

<div id="alt">Alt</div>
<div id="ctrl">Ctrl</div>
<div id="shift">Shift</div>
<div id="End">End</div>
<div id="Home">Start</div>
<div id="ArrowUp">Up</div>
<div id="ArrowLeft">Left</div>
<div id="ArrowDown">Down</div>
<div id="ArrowRight">Right</div>
<ol>
  <li>Hold down a key (listed above, but other than Shift),</li>
  <li>Hold Shift down</li>
  <li>Release the key of step 1</li>
  <li>Release Shift</li>
</ol>

JavaScript

来源：https://stackoverflow.com/questions/77282854/onkeyup-and-onkeydown-interfering-when-interleaving-presses-and-releases

1条答案

按热度按时间

jm2pwxwz1#

您可以使用Set简化按下的键。
另外，避免在元素上动态设置CSS。使用类进行样式设置。

const pressedKeys = new Set();

window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);

function handleKeyDown(e) {
  e.preventDefault();
  pressedKeys.add(e.key);
  update();
}

function handleKeyUp(e) {
  e.preventDefault();
  pressedKeys.delete(e.key);
  update();
}

function update(e) {
  for (let key of document.querySelectorAll('.key')) {
    key.classList.toggle('pressed', pressedKeys.has(key.dataset.key));
  }
}

.pressed {
  background: limegreen;
}

<div class="key" data-key="Alt">Alt</div>
<div class="key" data-key="Control">Ctrl</div>
<div class="key" data-key="Shift">Shift</div>
<div class="key" data-key="End">End</div>
<div class="key" data-key="Home">Start</div>
<div class="key" data-key="ArrowUp">Up</div>
<div class="key" data-key="ArrowLeft">Left</div>
<div class="key" data-key="ArrowDown">Down</div>
<div class="key" data-key="ArrowRight">Right</div>

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 交替按压和释放时onkeyup和onkeydown干扰

1条答案

相关问题

热门标签

最新问答