时间戳

首页 > 解决方案 > JavaScript：检查何时未按下按钮而不使用 onkeyup

javascript - JavaScript：检查何时未按下按钮而不使用 onkeyup

问题描述

我有一个任务：

  1. 单击按钮时运行动画
  2. 按住按钮只运行一次动画
  3. 仅使用“onKeyDown”设备支持的唯一 dom 事件

在这里你可以看到我是如何做到这一点的例子：

let timer = null;
let isPressed = false;

const runAnimation = () => {
    div.classList.remove('run-animation');
    void div.offsetWidth;
    div.classList.add('run-animation');
}

const fillDiv = () => {
  if (!isPressed) {
    isPressed = true;
    runAnimation();
  }

  clearTimeout(timer);
  timer = setTimeout(() => {
    isPressed = false;
  }, 50);
};

document.onkeydown = function() {
  fillDiv();
}

工作示例

但是这里的问题是，当你按住按钮时，动画会播放两次

是否有一些解决方案如何避免运行动画的第二次触发？

标签： javascriptcss-animations

解决方案

好的，这是一种查找键是否被按住的方法。keydown事件对象包含一个名为 repeat 的属性。

如果按键已按下足够长的时间以触发按键重复，则为 true；否则为假。

我们可以检查一下。如果它是真的，我们可以直接返回而不做任何事情，否则我们可以启动fillDiv函数。

我已经删除了所有不再需要的部分，比如isPressed和timer

为了让它工作，我必须e在你的事件监听器中作为参数传递，我曾经e表示event.

const div = document.getElementById('test');

const runAnimation = () => {
  div.classList.remove('run-animation');
  void div.offsetWidth;
  div.classList.add('run-animation');
}

const fillDiv = () => {
  runAnimation();
};

document.onkeydown = (e) => {
  if (e.repeat) return;
  fillDiv();
}
@-webkit-keyframes runAnimation {
  from {
    background-color: green;
  }
  to {
    background-color: white;
  }
}

.run-animation {
  -webkit-animation: runAnimation 1.5s ease;
  -webkit-animation-fill-mode: forwards;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#test {
  padding: 10px 17px;
  display: inline-block;
  border-radius: 5px;
  margin: 0 auto;
}

.text {
  font-size: 26pt;
}
<div id="test" class="center">
  <div class="text">
    Text
  </div>
</div>

我希望你觉得这有帮助。

推荐阅读