Выполните прослушиватель событий только один раз при нажатии на указанный c div, но продолжайте выполнять его на других div - PullRequest
Новая
       6

Выполните прослушиватель событий только один раз при нажатии на указанный c div, но продолжайте выполнять его на других div

0 голосов
/ 17 января 2020

У меня есть l oop, который проходит через 24 div (ящика) с тем же классом, с прослушивателем событий внутри. Каждый раз, когда кто-то нажимает на div (блок), он меняет цвет фона. Проблема в том, что я отслеживаю, сколько «ящиков» было открыто, но с моим текущим кодом, даже если ящик открыт, переменная openBox продолжает увеличиваться каждый раз, когда кто-то щелкает по ящику. 

for(var i = 0; i < boxes.length; i++){
  boxes[i].addEventListener("click", function(){
    this.style.backgroundColor = "#09093F";
    openedBoxes++;
});

Что я хотел знать, так это то, можно ли остановить слушателя событий от выполнения более одного раза на каждом div. Или проще найти другой способ отслеживания открытых ящиков (например, подсчет количества ящиков с фоном # 09093F).

PS. Я попытался добавить this.removeEventListener("click", function(){}); в прослушиватель событий, но, видимо, это не сработало, ха-ха.

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Вы можете использовать опцию once в addEventListener третьем параметре.

once: логическое значение, указывающее, что слушатель должен вызываться не более одного раза после добавления. Если true, слушатель будет автоматически удален при вызове. 

element.addEventListener('click', function(event) {
  // ...
}, {once: true});
0 голосов
/ 17 января 2020

Вы можете удалить прослушиватели событий: 

for(var i = 0; i < boxes.length; i++){
  var temp = i; // need this because i will = boxes.length when the listener is called
  var listenerFuncPlaceholder = null; // you need to pass the listener to removeEventListener
                           // so a ref to it has to exist outside the listener func
  var listenerFunc = () => {
    this.style.backgroundColor = "#09093F";
    openedBoxes++;
    boxes[temp].removeEventListener("click", listenerFuncPlaceholder);
  };
  boxes[i].addEventListener("click", listenerFunc);
  listenerFuncPlaceholder = listenerFunc; // so that it can be removed
}
...