在.c-class-toggler 上的CoreUI 元素上添加一个JS 点击事件
[英]Add a JS click event on a CoreUI element on .c-class-toggler
问题描述
问题
如何在CoreUI元素上添加额外的click事件。
就我的调试而言，主要问题是CoreUI有很多event.stopPropagation(); 用途。 这似乎破坏了任何进一步添加的click事件。
解决方法
我发现的一个技巧是注释掉coreui.js中的第 2293 行。
有趣的是，这个接缝将随着版本 3.3.0 进行更改。 更令人困惑的是， https://unpkg.com上的那个版本“3.2”（实际上是 3.2.2）已经有了这个变化（下面的代码片段）。
例子
在代码片段中，您可以看到菜单正确打开/关闭，但未触发额外的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
1 个解决方案
解决方案1
0 已采纳 2021-06-25 07:37:34
我只是再次运行我的问题，整个事情也没有我描述的黑客。
诀窍是挂钩现有的 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>
在单击事件上，从不同级别向每个 HTML 元素添加 Class，
[英]On click event add Class to each HTML Element from different levels,
"如何使用 Leaflet JS 在标记单击时向 HTML 元素添加类"
[英]How to add class to HTML element on marker click with Leaflet JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.