Почему инструменты разработчика Chrome показывают прослушиватели событий click, которые не привязаны к моему элементу?

Question

Я разрабатываю приложение, которое использует:

• jQuery 3.2.1
• Bootstrap 3.3.7
• FontAwesome 5.0.8

У меня есть модальное окно (с идентификатором #notifierModal), в котором есть элемент, представляющий стрелку «вниз» (используя шеврон-кружок вниз ) от FontAwesome.

Разметка для этого выглядит следующим образом:

<ul class="fa-ul toggle-notifier-group">
    <li> 
        <a href="#">Item 1</a>
        <i class="fas fa-chevron-circle-down toggle-filters"></i>
        <ul class="filters" style="display: none;">
            <li>Item 1 - sub A</li>
            <li>Item 1 - sub B</li>
            <li>Item 1 - sub C</li> 
        </ul>
    </li>

    <li> 
        <a href="#">Item 2</a>
        <i class="fas fa-chevron-circle-down toggle-filters"></i>
        <ul class="filters" style="display: none;">
            <li>Item 2 - sub A</li>
            <li>Item 2 - sub B</li>
            <li>Item 2 - sub C</li> 
        </ul>
    </li>

    <!-- Further items -->
</ul>

Предполагается, что когда пользователь нажимает стрелку вниз FontAwesome, он переключает видимость соответствующего списка .filters ниже (т. Е. Если пользователь щелкает его для «Item 1», он переключает только «Item 1 - sub»). "список).

Поэтому я добавил следующее в файл с именем app.js, на который ссылается мое приложение:

$(function() {
    $('#notifierModal').on('click', '.toggle-filters', function () {
        $(this).siblings(".filters").toggle();
    });
});

Это работает, но после нескольких раз использования ничего не происходит, когда пользователь нажимает на иконку.

Чтобы попытаться отладить это, я проверил элементы .toggle-filters в Chrome, а затем перешел к Прослушивателям событий> нажмите . Я получаю следующее:

Ссылка на строку 755 из app.js действительно содержит js, который я разместил выше и который нацелен на клики по .toggle-filters. Но все остальные номера строк - это js, которые не имеют ничего общего с этим элементом. Например:

• Строка 201: $(document).on('click', '#exportExcel', function (e) {
• Строка 321: $(document).on('click', '.browse-ctp__filters-data .include, .browse-ctp__filters-data .exclude', function () {

Все остальные строки (кроме строки 755) такие же.

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

Замечено в Chrome версии 70.0.3538.77, но подобное поведение уже встречалось в других версиях.

Answer 1

это из-за распространения события. Когда вы щелкаете элемент, событие распространяется на выбранный элемент до его родительского элемента до корня домена. Если вы хотите остановить распространение события, вы можете вызвать e.stopPropagation () в своей функции обратного вызова.

$('#notifierModal').on('click', '.toggle-filters', function (e) {
    e.stopPropagation();
    ...
});

Здесь Вы можете получить более подробное объяснение

Answer 2

Обновленный ответ:

Эта вкладка eventListener на боковой панели вкладки элементов в инструменте «Инспектор» отображает событие, зарегистрированное на странице.

Почему Chrome показывает мне это, если они не связаны с элементом, который я проверяю и просим просмотреть прослушиватели событий щелчка?

Если вы выберете какой-либо элемент в разметке на панели элементов, вы сможете увидеть все события, зарегистрированные для этого элемента, и все события, связанные с родительскими элементами.

Как я могу отладить это, когда он дает мне ссылки на вещи, которые не связаны?

Если вы установите флажок, вы увидите события, связанные только с выбранным элементом.