Как в forEath --> addEventListener обратиться не ко всем элементам

Question

Есть 6 блоков с одним классом, нужно чтобы при нажатии 5 из 6 из них меняли свой цвет при нажатии, а с одним при нажатии ничего не происходило (например с 3) . Пример кода:

const block = document.querySelectorAll('.block');

block.forEach(item => {
  item.addEventListener('click', (e) => {
    e.target.style.background = 'red';  
  });
});

.block {
  width: 200px;
  height: 200px;
  background: blue;
  margin-left: 210px;
}

<div class="block">
<div class="block">
<div class="block">
<div class="block">
<div class="block">
<div class="block">

Answer 1

Воспользуйтесь вторым аргументом колбека, индексом элемента:

const block = document.querySelectorAll('.block');

block.forEach((item, index) => {
  if (index === 2) return; 
  
  item.addEventListener('click', (e) => {
    e.target.style.background = 'red';  
  });
});

.block {
  width: 200px;
  height: 200px;
  background: blue;
  margin-left: 210px;
}

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Но, возможно, экономнее будет использовать делегирование событий — присвоить исключаемому элементу особый класс и проверять его в одном общем обработчике.

Answer 2

чтобы при нажатии 5 из 6 из них меняли свой цвет при нажатии, а с одним при нажатии ничего не происходило

Если «с одним из них» == «с тем, на который нажали»:

const blocks = document.querySelectorAll('.block');
const clickHandler = evt => {
  blocks.forEach(block => {
    if (block === evt.target) return;  // пропуск элемента, по которому кликнули
    block.style.background = block.style.background ? '' : 'red';
  });
};
blocks.forEach(block => block.addEventListener('click', clickHandler));

body { padding: 20px; text-align: center; }

.block {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: blue;
}

.block + .block { margin-left: 20px; }

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

В создании новой функции-обработчика на каждой итерации цикла (как в коде из вопроса), здесь нет смысла. Функцию можно объявить заранее, однократно - а затем добавить в качестве слушателя каждому из элементов. Это конечно не сэкономит великие горы памяти, но лучше сразу привыкать не множить лишние объекты - в будущем это пригодится (например, когда придется использовать removeEventListener).

Answer 3

const block = document.querySelectorAll('.block');
const ignoreIndex = 3;

block.forEach((item, index) => {
  if (index + 1 === ignoreIndex) 
    return;
    
  item.addEventListener('click', (e) => {
    e.target.style.background = 'red';       
  });
});

.block {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
}

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

БЛОГ НА HUSL

Как в forEath --> addEventListener обратиться не ко всем элементам

Ответы (3 шт):