在 .c-class-toggler 上的 CoreUI 元素上添加 JS 点击事件答案

【问题标题】：Add a JS click event on a CoreUI element on .c-class-toggler在 .c-class-toggler 上的 CoreUI 元素上添加 JS 点击事件
【发布时间】：2020-12-01 00:33:53
【问题描述】：

问题

如何在 CoreUI 元素上添加额外的 click 事件。

就我的调试而言，主要问题是CoreUI 很多event.stopPropagation(); 使用。这似乎会破坏任何进一步添加的click 事件。

解决方法

我发现的一个技巧是注释掉 line 2293 in the coreui.js。

这很有趣，因为这个接缝将随着版本 3.3.0 进行更改。更令人困惑的是，https://unpkg.com 上的那个版本“3.2”（实际上是 3.2.2）已经有了这个变化（下面的代码 sn-p）。

示例

在代码 sn-p 中，您可以看到菜单正确打开/关闭，但 additional click 事件没有被触发。

$(document).ready(function () {   
    // Trigger when sidebar change, only works with hack of coreui.js
    $(document).on('click', '.c-class-toggler', function (event) {
        console.log('hello world!');
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/@coreui/coreui@3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>

<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">

    <div class="c-sidebar-brand d-md-down-none">
        <a class="c-sidebar-brand-full h4" href="#">
            Example
        </a>
    </div>

    <ul class="c-sidebar-nav ps m-4">
       <li class="c-sidebar-nav-item"><h3>Menu<h3></li>
    </ul>

</div>
<div id="app" class="c-wrapper">
    <header class="c-header c-header-fixed px-3">
        <button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
            Menu
        </button> <pre class="ml-2 mt-4"><- additional click event is not working</pre>

        <button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
            Menu
        </button>

        <ul class="c-header-nav ml-auto">

        </ul>
    </header>

    <div class="c-body">
        <main class="c-main">

            <div class="container-fluid">
                                                
                <div class="card">
                    <div class="card-body">
                        <h2>Content</h2>
                    </div>
                </div>

            </div>

        </main>       
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/@coreui/coreui@3.2/dist/js/coreui.min.js"></script>

</body>

注意：似乎我不是唯一遇到此问题的人：https://github.com/coreui/coreui/issues/155

【问题讨论】：

标签： javascript jquery dom-events core-ui

【解决方案1】：

我只是再次运行我的问题，整个事情也没有我描述的黑客攻击。

诀窍是挂钩现有的 JS 事件。

调试器控制台正常显示令人兴奋的事件，例如。在sitebar 的情况下，您可以使用classtoggle 事件（例如jsfiddle 或以下的示例）。

coreui 的一个问题是事件的名称通常与正常的引导事件不同。

$(document).ready(function () {   
    // Triggers when existing sidebar events are called
    $('#sidebar').on('classtoggle', function (event) {
        console.log('hello world!');
        $('.working').append('!');
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/@coreui/coreui@3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>

<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">

    <div class="c-sidebar-brand d-md-down-none">
        <a class="c-sidebar-brand-full h4" href="#">
            Example
        </a>
    </div>

    <ul class="c-sidebar-nav ps m-4">
       <li class="c-sidebar-nav-item"><h3>Menu<h3></li>
    </ul>

</div>
<div id="app" class="c-wrapper">
    <header class="c-header c-header-fixed px-3">

        <button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">            Menu
        </button>
    
        <button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
            Menu
        </button> <pre class="working ml-2 mt-4"><- additional click event works when hooked to existing events</pre>

    </header>


    <div class="c-body">
        <main class="c-main">

            <div class="container-fluid">
                                                
                <div class="card">
                    <div class="card-body">
                        <h2>Content</h2>
                    </div>
                </div>

            </div>

        </main>       
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/@coreui/coreui@3.2/dist/js/coreui.min.js"></script>

</body>

【讨论】：