如何防止引导下拉菜单在内部点击时关闭，同时维护委派事件处理程序功能？-js教程-PHP中文网

如何防止引导下拉菜单在内部点击时关闭，同时维护委派事件处理程序功能？

Barbara Streisand

发布： 2024-10-28 00:14:29

原创

895 人浏览过

How to Prevent Bootstrap Dropdowns from Closing on Internal Clicks While Maintaining Delegated Event Handler Functionality?

管理下拉菜单：防止内部点击导致菜单关闭

Twitter Bootstrap 下拉菜单面临的挑战是它们倾向于在任何点击时关闭，包括在菜单本身内进行的点击。为了克服这个限制，通常使用简单的 event.stopPropagation() 将事件处理程序附加到下拉菜单。

但是，此解决方案有一个缺点：像轮播控件这样的元素的委托事件处理程序变得无效。要理解这一点，请考虑以下代码：

<code class="html"><ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel content -->
        </div>
      </li>
    </ul>
  </li>
</ul></code>

登录后复制

<code class="javascript">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});</code>

登录后复制

通过将事件处理程序附加到 ul.dropdown-menu.mega-dropdown-menu，我们打算防止菜单在任何点击时关闭在其中。但是，在文档对象上为轮播控件等元素注册的委托事件处理程序会变得无效，导致它们无法触发事件。

解决方案：

解决此问题问题，您可以使用以下代码：

<code class="javascript">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

登录后复制

通过使用 $(document).on('click', ...)，您可以确保事件处理程序附加到整个文档对象。这允许它拦截下拉菜单中的点击，同时仍然允许委托的事件处理程序正常运行。

以上是如何防止引导下拉菜单在内部点击时关闭，同时维护委派事件处理程序功能？的详细内容。更多信息请关注PHP中文网其他相关文章！