javascript - 如何在某些特定条件后向元素添加事件监听器？

Question

我有一个 tic-tac-toe 游戏板元素，它以 5 秒的动画出现在 UI 中。(不透明度 0 -> 100 淡入淡出样式)并且我希望它在动画结束后而不是在动画结束后立即可单击。页面已加载。我如何使用普通的 javascript 事件监听器来做到这一点？

const cells = document.querySelectorAll('.cell');

cells.forEach(cell => cell.addEventListener('click', (e) => {
  if (board[e.target.getAttribute("data-render")] === '') {
    origBoard[e.target.getAttribute("data-render")] = huPlayer;
    render();
    setTimeout(aiMove, 700);
}
}));

这很好用，但我需要在上面的动画或“aiMove”函数执行后立即激活事件监听器。我不希望用户可以在动画结束之前单击单元格。动画仅是带有 @keyframes 的 CSS。

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

Answer 1

您可以通过多种方式做到这一点。以下是一些示例。

使用标志和 setTimeout

这意味着您的脚本必须知道持续时间。

const cells = document.querySelectorAll('.cell');
let animationComplete = false;

setTimeout(() => animationComplete = true, 5000);

cells.forEach(cell => cell.addEventListener('click', (e) => {
  if (animationComplete) {
    console.log("You can click because the animation is over");
  }
}));

<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><style>.cell{padding: 20px; background: red; display: inline-block; animation: fadeIn 5s;}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}</style>

使用 setTimeout 并在设置事件监听器之前等待

这意味着您的脚本必须知道持续时间。

const cells = document.querySelectorAll('.cell');

setTimeout(() => {
  cells.forEach(cell => cell.addEventListener('click', (e) => {
    console.log("You can click because the animation is over");
  }));
}, 5000);

<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><style>.cell{padding: 20px; background: red; display: inline-block; animation: fadeIn 5s;}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}</style>

使用标志和 animationend 事件

无需知道持续时间!在 CSS 中更改它，JS 也会随之更改。

const cells = document.querySelectorAll('.cell');
let animationComplete = false;

cells[0].addEventListener(whichAnimationEvent(), () => animationComplete = true);

cells.forEach(cell => cell.addEventListener('click', (e) => {
  if (animationComplete) {
    console.log("You can click because the animation is over");
  }
}));

// The name of the event depends on the browser
function whichAnimationEvent(){
  var t, el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><style>.cell{padding: 20px; background: red; display: inline-block; animation: fadeIn 5s;}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}</style>

使用 animationend 事件并在设置事件监听器之前等待

也无需知道持续时间。

const cells = document.querySelectorAll('.cell');

cells[0].addEventListener(whichAnimationEvent(), () => {
  cells.forEach(cell => cell.addEventListener('click', (e) => {
    console.log("You can click because the animation is over");
  }));
});

// The name of the event depends on the browser
function whichAnimationEvent(){
  var t, el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><style>.cell{padding: 20px; background: red; display: inline-block; animation: fadeIn 5s;}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}</style>