Почему этот код не работает? javascript

Question

Почему этот код не работает? javascript

иван савин Ученик (42), на голосовании 1 год назад

html
<div id="timepicker_time_1">
<div id="timepicker_hours_1">
<p class="timepicker_hours_sp_1">22</p>
<p class="timepicker_hours_sp_1">23</p>
<p class="timepicker_hours_sp_1">00</p>
</div>

<div id="timepicker_minutes_1">
<p id="timepicker_minutes_sp_1">11</p>
<p id="timepicker_minutes_sp_1">12</p>
<p id="timepicker_minutes_sp_1">11</p>
</div>

</div>
js
const timepickerHours = document.querySelectorAll('#timepicker_hours_1, .timepicker_hours_sp_1');
timepickerHours.forEach(timepickerHour => {

timepickerHour.addEventListener('mousemove', function (event) {
console.log("grgreg");
});
});

код ничего не выводит в консоль при движении курсором на элементе. В чем дело?

Answer 1

Андрій . Мастер (1955) 1 год назад

Незнаю

Сафронов НиколайУченик (159) 1 год назад

А наxyй написал тогда?

Андрій . Мастер (1955) Сафронов Николай, незнаю

Answer 2

Проблема заключается в том, что селектор '#timepicker_hours_1, .timepicker_hours_sp_1' возвращает как элемент с id="timepicker_hours_1", так и все элементы с классом timepicker_hours_sp_1, которые находятся внутри элемента с id="timepicker_hours_1".

В результате, когда вы добавляете обработчик событий mousemove к каждому элементу, вы добавляете его как к элементу #timepicker_hours_1, так и к каждому элементу .timepicker_hours_sp_1.

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

 const timepickerHours = document.querySelectorAll('#timepicker_hours_1 .timepicker_hours_sp_1'); 
timepickerHours.forEach(timepickerHour => { 
  timepickerHour.addEventListener('mousemove', function (event) { 
    console.log("grgreg"); 
  }); 
});

Здесь мы изменяем селектор на '#timepicker_hours_1 .timepicker_hours_sp_1', который выберет только элементы с классом timepicker_hours_sp_1, которые находятся внутри элемента с id="timepicker_hours_1".

Затем мы добавляем обработчик событий mousemove к каждому элементу .timepicker_hours_sp_1 в отдельности.

Answer 3

Потому что код бесполезный (но между тем и так рабочий). На кой черт тебе понадобился цикл по вложенным элементам, если на вложенные элементы действуют ВСЕ события родителя?!

 const timepickerHours = document.querySelector('#timepicker_hours_1'); 
 
timepickerHours.addEventListener('mousemove', () => { 
   console.log("grgreg"); 
})