添加事件监听器是不是很奇怪？

Question

<section class="game--section">
        <div class="game-space">
            <div class="box box1 active-box"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
            <div class="box box5"></div>
            <div class="box box6"></div>
        </div>
        <div class="restart-button">🔁</div>
    </section>

我有一个包含 6 个子框的 div(.game-space)，其中一个是具有绿色背景的 ('.active-Box) 类的活动框，

所以当我点击活动框时，它会将其类（.active-Box）移动到下一个以这种方式提供绿色背景的框，它一直到最后一个框。

我还有重启按钮，当我点击它时，游戏应该重新启动，就像活动框类被标记到第一个框，然后从这里它再次转移到下一个类并一直到结束框点击

但是，在单击重新启动按钮之前，框之间的移动是一个接一个地线性移动，但是在单击重新启动按钮之后，框被跳过而不是线性移动，跳过一些框之间，为什么？任何解决方案？

'use strict'
const allBox = document.querySelectorAll('.box');
const activeBox = document.querySelector('.active-box')
const restartButton = document.querySelector('.restart-button')
let active_box_index = activeBox_index_function();

slideBox(allBox[active_box_index]);

function slideBox(pass_active_box) {
  pass_active_box.addEventListener('click', function() {
    allBox[active_box_index].classList.remove('active-box')
    allBox[active_box_index + 1].classList.add('active-box')

    active_box_index = activeBox_index_function()
    slideBox(allBox[active_box_index]);
  })
}

console.log(allBox);

// active box index
function activeBox_index_function() {
  let index;
  allBox.forEach((el, indx) => {
    if (el.matches('.active-box')) {
      index = indx
    };
  })
  return index;
}

// when restart button clicked
restartButton.addEventListener('click', function() {
  allBox[active_box_index].classList.remove('active-box')
  allBox[0].classList.add('active-box')

  active_box_index = activeBox_index_function()
})

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap');
@import url('https://fonts.cdnfonts.com/css/common-pixel');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Poppins', sans-serif;
  color: black;
}

.game--section {
  height: 100vh;
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-space {
  width: 80rem;
  height: 10rem;
  padding: 1rem;
  border-radius: 9px;
  background-color: #f5f5f5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.box {
  background-color: tomato;
}

.active-box {
  background-color: #099268;
  cursor: pointer;
}

.restart-button {
  font-size: 3rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <section class="game--section">
    <div class="game-space">
      <div class="box box1 active-box"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
      <div class="box box5"></div>
      <div class="box box6"></div>
    </div>
    <div class="restart-button">🔁</div>
  </section>

  <script src="script.js"></script>
</body>

</html>

Answer 1

你描述的问题是因为事件监听器的积累。

您可以使用以下代码：

'use strict'
const allBox = document.querySelectorAll('.box');
const activeBox = document.querySelector('.active-box')
const restartButton = document.querySelector('.restart-button')
let active_box_index = activeBox_index_function();

slideBox(allBox[active_box_index]);

function myFunction(){
    allBox[active_box_index].classList.remove('active-box');
    if (!((active_box_index + 1)===allBox.length)){
    allBox[active_box_index + 1].classList.add('active-box');
    }
    allBox[active_box_index].removeEventListener('click', myFunction);
    active_box_index = activeBox_index_function();
    slideBox(allBox[active_box_index]);
}
  
function slideBox(pass_active_box) {
  if (!((active_box_index + 1)===allBox.length)){
  pass_active_box.addEventListener('click', myFunction)
  }
}

console.log(allBox);

// active box index
function activeBox_index_function() {
  let index;
  allBox.forEach((el, indx) => {
    if (el.matches('.active-box')) {
      index = indx
    };
  })
  return index;
}

// when restart button clicked
restartButton.addEventListener('click', function() {
  allBox[active_box_index].classList.remove('active-box');
  allBox[0].classList.add('active-box');
  allBox[active_box_index].removeEventListener('click', myFunction);
  allBox[0].addEventListener('click', myFunction);
  active_box_index = activeBox_index_function()
})

变化是：

添加removeEventListener()

和其他几个错误修复：

仅当不是最后一个框时才传递类并添加事件监听器。如果需要，您可以将第一个框设置为最后一个框之后的活动框。只需添加一个
```
else
```
语句并在其中添加
```
allBox[0].classList.add('active-box');
```
。同样不要忘记添加事件监听器....

希望你觉得这有用！

编辑：我刚刚发现，如果我们定义函数，我们不必添加

removeEventListener()

。这是因为如果该函数已经在该目标的事件侦听器列表中，则不会再次添加该函数。但是当我们用匿名函数调用事件监听器时，它是第二次添加的。请参阅this answer和MDN Web Docs about addEventListener().

添加事件监听器是不是很奇怪？

问题描述投票：0回答：1

1个回答

最新问题

添加事件监听器是不是很奇怪？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1