Почему скрипт работает некорректно?

Question

[gazes12]

/*СЛУШАТЕЛЬ КЛИКОВ*/
document.onclick = (e) =>{
    if(e.target.classList.contains('burger')){
        console.log('dd')
    }
}

Работает как то через раз, то выводится console.log('dd'), то вообще не выводится.
Еще у меня медленный интернет, это же ни как не влияет?

Answer 1

[Anonymous Penguin]

Еще у меня медленный интернет, это же ни как не влияет?

Да хоть отключи его, будет вообще пофиг. Скрипт выполняется на стороне клиента, он не использует интернет.
Что касательно вопроса, то скорее всего, класс burger каждый раз либо добавляется, либо удаляется. По этому и работает через раз. Да и проще будет слушать непосредственно тот элемент с классом burger, а не весь документ

Comments

[gazes12]

класс burger каждый раз либо добавляется, либо удаляется.

У меня нету никакого кода, который мог бы это делать

[Anonymous Penguin]

gazes12, тогда нужно уточнять html и js код, это надо было сделать с самого начала.

Answer 2

[Сергей Соколов]

выводите в консоль без условий e.target — увидите, что за элемент поймал клик.

Интуиция подсказывает, что, например, интересуют клики по div'у, а ловит их вложенный элемент:

<div class="burger">
  <span>Какой-то текст</span>
</div>

тут часть кликов поймает не div, а span. Но, если добавить span'у CSS-свойство pointer-events: none;, он перестанет взаимодействовать с мышкой, и все клики отловятся именно div'ом, как и задумывалось.

Comments

[gazes12]

Сергей Соколов А что если у div`а будет p и h1, то нужно всем им прописать pointer-events? Или можно div`у какое-то одно свойство задать?

[Сергей Соколов]

gazes12, что, если попробовать?

Answer 3

[Rsa97]

Замените
if (e.target.classList.contains('burger'))
на
if (e.target.closest('.burger'))
Тогда будут отлавливаться клики и по дочерним элементам.