为什么Chrome开发人员工具会显示未绑定到我的元素的点击事件监听器？

Question

我正在开发一个使用以下内容的应用程序：

• jquery 3.2.1
• 引导程序3.3.7
• FontAwesome 5.0.8

我有一个模式窗口（ID为#notifierModal），其中包含一个表示“向下”箭头的元素（使用FontAwesome的chevron-circle-down）。

此标记如下：

<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”） -子”列表）。

因此，我将以下内容添加到名为app.js的文件中，该文件被我的应用程序引用：

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

这有效，但是在使用几次后，当用户单击图标时似乎什么也没发生。

为了进行调试，我检查了Chrome中的.toggle-filters元素，然后转到事件监听器>单击。我得到以下信息：

app.js的第755行上的引用确实包含我在上面发布的针对.toggle-filters的点击次数的js。但是所有其他行号都是与该元素无关的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会向我显示这些内容？当我给无关的东西提供参考时，我该如何调试呢？还是相关，这就是为什么它可能无法正常工作的原因？

在Chrome版本70.0.3538.77中被引用，但是在其他版本中以前已经看到这种行为。

Answer 1

更新的答案：

检查器工具“元素”选项卡侧面板上的eventListener选项卡显示了在页面中注册的事件。

  

如果Chrome与我正在检查并要求查看其点击事件监听器的元素无关，为什么Chrome会向我显示这些内容？

如果在元素面板的标记中选择任何元素，则可以看到为该元素注册的所有事件以及绑定在父元素上的所有事件。

  

当它给我有关无关内容的引用时，我该如何调试呢？

如果切换复选框，则可以看到仅绑定在所选元素上的事件。

Answer 2

这是因为事件传播。单击元素时，事件会传播到被单击元素的父元素，直到dom的根。 如果要停止事件传播，可以在回调函数中调用e.stopPropagation（）。

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

Here，您可以得到更详细的解释