Question

我想问您有关keyup事件侦听器的问题，我的工作不正常。当我按下键时，它会将按下的类添加到div中。但是当我释放密钥时，它不会删除该类

function keyPressed(e){
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  key.classList.add('pressed');
}
function removePressed(e) {
  if(e.propertyName !== 'opacity') return;
  this.classList.remove('pressed');
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('keyup', removePressed))
window.addEventListener('keydown', keyPressed);

.pressed {
  transform: scale(1.0);
  opacity: 0.7;
}

<div data-key="55" class="key item6">
  <kbd>7</kbd>        
</div>

Answer 1

尝试

HTML：

<div data-key="55" class="key-item6">
      <kbd>7</kbd>        
    </div>

JS：

$('.key-item6').keyup(function () {
    if ($.trim($('.key-item6').val()).length) {         
        $(this).removeClass('pressed');
    }
});

Answer 2

这很难说，但是您可以进行一些简单的调试。更改以下代码行：

  this.classList.remove('pressed');

对此：

  console.log(this.classList)

这是它的外观：

function keyPressed(e){
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  key.classList.add('pressed');
}
function removePressed(e) {
  if(e.propertyName !== 'opacity') return;
  console.log(this.classList)
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('keyup', removePressed))
window.addEventListener('keydown', keyPressed);

如果控制台显示您要删除的类的元素，那么您就在正确的轨道上！

Answer 3

问题出在事件处理程序上。您正在将事件处理程序附加到键上，而该键不在焦点上。因此，您的keyup事件实际上是在window上触发的。

如果您真的想在.key上使用键入键，请先对被按下的元素使用tabindex和focus。请参阅随附的代码。

function keyPressed(e){
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  key.classList.add('pressed');
  key.focus();
}
function removePressed(e) {
  // if(e.propertyName !== 'opacity') return;
  this.classList.remove('pressed');
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('keyup', removePressed))
window.addEventListener('keydown', keyPressed);

.pressed {
  transform: scale(1.0);
  opacity: 0.7;
}

<div data-key="55" class="key item6" tabindex=0>
  <kbd>7</kbd>        
</div>

此外，e.propertyName是未定义的，导致其返回。

我的建议是将keyup绑定到window，并使用与keyPressed相同的方法从类列表中删除。

如何使用keyup函数删除div类？

3 个答案: