Почему обработчик клика на кнопке может не срабатывать без ошибок в консоли?

Когда обработчик клика не срабатывает и при этом в консоли нет ошибок, это обычно означает, что код выполнился корректно, но либо не нашёл нужный элемент, либо событие до него не дошло. Разберём основные причины.

Элемент ещё не в DOM

Если скрипт подключён в <head> без defer или обёртки в DOMContentLoaded, то document.querySelector вернёт null, и вызов addEventListener упадёт с ошибкой. Но если используется проверка или библиотека молча игнорирует отсутствие элемента, ошибки не будет.

// Плохо: скрипт в head, кнопки ещё нет
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => console.log('click'));

// Хорошо: ждём DOM
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#btn')
    .addEventListener('click', () => console.log('click'));
});

Событие перехватывается или не доходит

• pointer-events: none на кнопке или родителе — клики игнорируются.
• Другой элемент с большим z-index перекрывает кнопку.
• Вызов event.stopPropagation() в дочернем обработчике не даёт событию всплыть до нужного слушателя.
• Обработчик навешан на родителя, но клик происходит по элементу, который не всплывает (например, disabled кнопка).

Неправильный селектор или контекст

Частая ошибка — навесить обработчик на document.querySelector('.btn'), который возвращает только первый элемент, тогда как клик происходит по другому. Или использовать getElementById с id, которого нет.

Динамически добавленные элементы

Если кнопка создана после навешивания обработчика, слушатель на ней не появится. Решение — делегирование событий:

document.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-btn')) {
    console.log('click on dynamic button');
  }
});

Итог: если обработчик не срабатывает без ошибок, проверь момент навешивания, селектор, CSS-свойства и всплытие события. В большинстве случаев помогает делегирование или ожидание DOMContentLoaded.