在.c-class-toggler 上的CoreUI 元素上添加一个JS 点击事件
[英]Add a JS click event on a CoreUI element on .c-class-toggler
问题描述
Question
问题
How can I add an additional click event on a CoreUI element.如何在CoreUI元素上添加额外的click事件。
As far as my debugging goes, the main problem is that CoreUI a lot of event.stopPropagation();就我的调试而言，主要问题是CoreUI有很多event.stopPropagation(); uses.用途。 This seems to destroy any further added click event.这似乎破坏了任何进一步添加的click事件。
Workaround解决方法
A hack I found was to comment out line 2293 in the coreui.js .我发现的一个技巧是注释掉coreui.js中的第 2293 行。
It's interesting, as this seams to be changed with Version 3.3.0.有趣的是，这个接缝将随着版本 3.3.0 进行更改。 Even more confusing is, that version "3.2" (really 3.2.2) on https://unpkg.com has already this changes (s. code snippet below).更令人困惑的是， https://unpkg.com上的那个版本“3.2”（实际上是 3.2.2）已经有了这个变化（下面的代码片段）。
Example例子
In the code snippet you can see that the menu opens/closes correctly but the additional click event doesn't get trigger.在代码片段中，您可以看到菜单正确打开/关闭，但未触发额外的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>
Note : It seems like I'm not the only one with this issue: https://github.com/coreui/coreui/issues/155注意：似乎我不是唯一一个遇到此问题的人： https://github.com/coreui/coreui/issues/155
1 个解决方案
解决方案1
0 已采纳 2021-06-25 07:37:34
I just run again over my question, the whole thing works also without my described hack.我只是再次运行我的问题，整个事情也没有我描述的黑客。
The trick is to hook on existing JS events.诀窍是挂钩现有的 JS 事件。
The debugger console normal show you the exciting events, eg.调试器控制台正常显示令人兴奋的事件，例如。 in case of the sitebar there is a classtoggle event you can hook on (s. example in jsfiddle or below).在sitebar的情况下，您可以挂上一个classtoggle事件（例如jsfiddle或下面的示例）。
One issue withe coreui is that the events have often different names to the normal bootstrap events. 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.