时间戳

首页 > 解决方案 > 点击html元素触发哪个JS函数

jquery - 点击html元素触发哪个JS函数

问题描述

我有一个 HTML 侧边栏，我想更改打开/关闭侧边栏的图标

我的 HTML 代码是：

<li class="sidebar-toggler-wrapper">
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
            <div class="sidebar-toggler">
            </div>
            <div class="clearfix">
            </div>
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        </li>

具有类的元素sidebar-toggler是我单击以打开/关闭侧边栏的元素。如您所见，没有定义图标的 html（例如：）<i class="fa fa-arrow-left"></i>。所以在某个地方有一个 JS 代码可以设置和更改这个图标，但我找不到这个 js/line。

我想 Google Chrome Inspector 或 Firebug 中有一个选项可以显示网页中触发的所有事件或类似的东西？

我在我的所有项目中搜索“$('.sidebar-toggler')”之类的东西，但没有找到有趣的东西。

更新

搜索“sidebar-toggler”给了我这个代码，不是图标处理的痕迹

// handle the search submit
    $('.sidebar-search .submit').on('click', function (e) {
        e.preventDefault();
        if ($('body').hasClass("page-sidebar-closed")) {
            if ($('.sidebar-search').hasClass('open') == false) {
                if ($('.page-sidebar-fixed').size() === 1) {
                    $('.page-sidebar .sidebar-toggler').click(); //trigger sidebar toggle button
                }
                $('.sidebar-search').addClass("open");
            } else {
                $('.sidebar-search').submit();
            }
        } else {
            $('.sidebar-search').submit();
        }
    });`

谢谢您的帮助

标签： jquery

解决方案

Chrome devtools 确实有一个功能可以帮助解决这种情况——你知道一个事件正在触发，但你不知道结果是什么代码正在运行。

请参阅下面的屏幕截图以供参考。

  1. 打开Sources选项卡（您可能必须单击箭头才能看到它）。
  2. 在左下角的面板中，展开标题为Event Listener Breakpoints的部分，然后展开Mouse子部分，然后选中单击框。这将导致 Chrome 调试器暂停任何点击事件。现在单击页面上的元素，Chrome 将进入调试模式。
  3. 可能会调用多个处理程序，其中一些您不关心。使用蓝色的恢复脚本执行按钮和/或它旁边的控件可以挖掘正在运行的代码并搜索您关心的内容。准备好通过一堆 jQuery 库代码 :)

开发工具截图

如果您不熟悉 Chrome 的调试器，一开始可能会有点令人生畏。您可能会经历几个周期，错过了您想要的内容，浏览器会恢复正常运行。如果发生这种情况，只需单击#toto要重新开始的元素，然后重试。

查看Google Chrome 开发者 YouTube 频道几个月前（2018 年 1 月）发布的关于调试的精彩视频。它很短（8 分钟），但很有教育意义。

最新版本的 Chrome (66) 中还有一个很棒的功能，它允许您在调试器暂停时从调用堆栈中黑箱化脚本。如果您安装了 Chrome 66 并且卡在一堆 jQuery 代码中，请jquery.min.js在Callstack窗格中找到，右键单击它，选择Blackbox script，然后重新触发单击断点。Chrome 现在应该绕过 jQuery 代码，从而更容易找到您想要的内容。

推荐阅读