在.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.