纯JavaScript中addEventListener()仅触发一次问题求助

嘿，我来帮你排查这个问题～其实你的addEventListener每次点击都在正常触发，只是视觉上看起来没效果而已，原因出在样式的逻辑上：

问题根源 #

第一次点击时，你给#testing元素添加了mystyle（启动动画），1秒后又添加new-style（暂停动画）。但第二次点击时，classList.add("mystyle")不会有任何作用——因为这个类已经存在于元素上了，动画不会重新启动；同时new-style也已经存在，所以完全看不到视觉变化，让你误以为事件没触发。

修复方案 #

我们需要在每次点击时重置元素的样式状态，让动画能重新启动。修改你的JS代码如下：

var btn = document.getElementById("next");
btn.addEventListener("click", clickDelay);

function clickDelay(){
  // 先获取元素，避免重复DOM查询
  const testingEl = document.getElementById("testing");
  // 移除所有相关类，重置动画状态
  testingEl.classList.remove("mystyle", "new-style");
  // 重新添加mystyle，触发动画从头开始
  testingEl.classList.add("mystyle");
  // 1秒后暂停动画
  setTimeout(function() {
    testingEl.classList.add("new-style");
  }, 1000);
}

另外，你的SASS代码语法有点小问题，补充完整大括号和分号会更规范（避免编译错误）：

.mystyle {
  animation: animatedBackground 10s linear infinite;
}
.new-style {
  animation-play-state: paused;
}

验证方法 #

你可以在clickDelay函数里加一行console.log("点击触发了！")，就能看到每次点击控制台都会输出，证明事件其实一直在正常工作～

内容的提问来源于stack exchange，提问作者kosmikgirl