Почему мое событие на теле вызывается перед событием на конкретном элементе?

Question

Почему мое событие на теле вызывается перед событием на конкретном элементе?

1

У меня есть этот код в моем проекте, который использует Foundation 5.5.3

$(function() {
  var $carsDropdown = $("#cars-dropdown");

  // Close cars dropdown when clicking outside of it or on close button
  $("body, #cars-dropdown .btn-close").click(function(ev) {
    if ($carsDropdown.hasClass("open")) {
      console.log("Dropdown is open");
      console.log("Closing dropdown.\n");
      Foundation.libs.dropdown.close($carsDropdown);
      // ev.stopPropagation();
    }
    else {
      console.log("Dropdown is closed\n");
    }
  });
);

Я ожидаю, что это закрывает div, когда я нажимаю на тело, и это работает. Он также отлично работает, когда я нажимаю на.btn-close.

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

Dropdown is open.
Closing dropdown.

Точно так же, когда я нажимаю на .btn-close.

Из этого я заключаю, что какое-то событие на body срабатывает перед событием фонда на кнопке, которое должно переключать выпадающее меню. Мое событие закрывает раскрывающийся список и код основания, чтобы открыть его.

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

Теперь, когда я раскомментирую ev.stopPropagation(), все работает так, как ожидалось. Нажмите на тело, чтобы предотвратить распространение какого-либо другого элемента? Как это возможно?

Для тестирования, пожалуйста, используйте этот код: https://codepen.io/anon/pen/BZyRLp

Marko Avlijaš 05 июнь 2017, в 14:40

Источник

Теги:

javascript

events

zurb-foundation-5

1 ответ

Ещё вопросы

charlietfl · Answer 1 · 2017-06-05T11-06-00.000Z

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

Вот почему вы видите событие body перед добавлением класса

Проверьте цель и ничего не делайте, если это элемент data-dropdown

$("body, #cars-dropdown .btn-close").click(function(e) {

  if (!$(e.target).closest('[data-dropdown]').length) {

    if ($carsDropdown.hasClass("open")) {
      console.log("Dropdown is open");
      console.log("Closing dropdown.\n");
      Foundation.libs.dropdown.close($carsDropdown);
    } else {
      console.log("Dropdown is closed\n");
    }
  } else {
    console.log('Foundation Dropdown button');
  }
});

Спасибо, но это уже работает, если я раскомментирую ev.stopPropagation() .
Хорошо, так что в основном та же самая проблема с пузырями, другой подход. вы останавливаете его, чтобы подняться на документ от тела в делегации на их кнопку