Почему не срабатывает функция при нажатии?

Question

[Денис Кузьмин]

Почему не срабатывает функция при нажатии .close?
Как сделать, чтобы при нажатии на .section срабатывала первая функция и при нажатии .close срабатывала вторая? Не меня при этом порядок элементов.

Answer 1

[0xD34F]

Брехня, всё срабатывает.

Бегом гуглить, что такое всплытие событий.

Надо его останавливать:

const $section = $('.section').on('click', () => $section.addClass('opened'));
$section.find('.close').on('click', e => {
  e.stopPropagation();
  $section.removeClass('opened');
});

// или

const section = document.querySelector('.section');

section.addEventListener('click', () => section.classList.add('opened'));
section.querySelector('.close').addEventListener('click', e => (
  e.stopPropagation(),
  section.classList.remove('opened')
));

Или есть вариант ограничиться одним обработчиком, в котором проверять, откуда событие пришло:

const $section = $('section').click(e => {
  $section.toggleClass('opened', !$(e.target).is('.close'));
});

// или

document.querySelector('.section').addEventListener('click', e => {
  e.currentTarget.classList.toggle('opened', !e.target.matches('.close'));
});

Comments

[Денис Кузьмин]

Спасибо. Забыл)

Answer 2

[MikUrrey]

Не срабатывает потому, что клик "поднимается" до .section и его обработчик срабатывает тоже.
Нужно запретить всплывание события:

$('.close').on('click', function (e) {
  e.stopPropagation(); // вот так
  $('.section').removeClass('opened');
});

или stopImmediatePropagation, если в вашем случае первое не сработает

Comments

[Денис Кузьмин]

Спасибо. Забыл про него)