Javascript 为什么Chrome开发工具会显示没有绑定到my元素的点击事件监听器？

我正在开发一个应用程序，它使用：

jquery 3.2.1 引导程序3.3.7 第5.0.8节 我有一个ID为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>

这是可行的，但使用几次之后，当用户单击图标时，似乎什么都没有发生

为了尝试并调试它，我检查了Chrome中的.toggle过滤器元素，然后转到事件侦听器>单击。我得到以下信息：

app.js第755行上的引用确实包含我在上面发布的js，目标是点击.toggle过滤器。但所有其他行号都是与该元素无关的js。例如：

第201行： $document.on'click'，'exportExcel'，函数e{ 第321行：$document.on'click'，'.browse-ctp\uu filters-data.include.browse-ctp\uu filters-data.exclude'，函数{ 除第755行之外的所有其他行都是这样的

为什么Chrome会向我显示这些内容，如果它们与我正在检查并要求查看的元素无关？当它向我提供与之无关的内容的引用时，我如何调试这些内容？或者它是否相关，这就是为什么它可能不起作用的原因吗

在Chrome版本70.0.3538.77中注意到了这一点，但在其他版本中也见过这种情况。

更新答案：

Inspector工具中元素侧面板选项卡中的eventListener选项卡显示在页面中注册的事件

如果这些元素与我正在检查并要求查看其单击事件侦听器的元素无关，为什么Chrome会向我显示它们

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

当它给我引用了一些无关的东西时，我如何调试它呢

---

如果切换该复选框，则只能看到绑定在所选元素上的事件。

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

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

---

你可以有一个更详细的解释

这会对Chrome在事件监听器>点击面板中显示的内容产生任何影响吗？我已经添加了该代码，但它仍然显示相同的应用程序行。js@Andy好的。我现在知道了。如果你能看到的话。有一个复选框。它可以显示在祖先和当前选择的元素上绑定的事件元素选项卡中的所有事件。如果您切换复选框，它将显示绑定在元素上的所有事件以及子事件。如果我取消选中祖先，它将从面板中删除所有内容，并且根本不显示任何内容-屏幕截图上的所有内容都将消失，因此只留下一个空白。这很好。这样您可以看到事件将在dom树中传播。

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