时间戳

首页 > 解决方案 > 为什么 Chrome 开发工具会显示未绑定到我的元素的点击事件侦听器？

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

问题描述

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

我有一个模式窗口（带有 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 - sub”列表）。

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

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

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

为了尝试调试，我检查了.toggle-filtersChrome 中的元素，然后转到Event Listeners > click。我得到以下信息：

在此处输入图像描述

第 755 行的参考app.js确实包含我在上面发布的针对点击的 js .toggle-filters。但是其他所有的行号都是与那个元素无关的js。例如：

所有其他行（除了第 755 行）都是这样的。

如果它们与我正在检查并要求查看点击事件侦听器的元素无关，为什么 Chrome 会向我显示这些？当它给我引用不相关的东西时，我该如何调试它？或者它是否相关，这就是它可能不起作用的原因吗？

在 Chrome 版本 70.0.3538.77 中注意到，但之前在其他版本中看到过这种行为。

标签： javascripthtmlgoogle-chrome

解决方案

更新的答案：

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

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

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

当它给我引用不相关的东西时，我该如何调试它？

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

推荐阅读