我有一个推特引导下拉菜单。所有Twitter Bootstrap用户都知道，下拉菜单在点击时关闭(甚至在里面点击)。
为了避免这种情况，我可以很容易地在下拉菜单上附加一个单击事件处理程序，并简单地添加著名的event. stoppropagation()。
<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">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
这看起来很简单，也是一种非常常见的行为，然而，由于carousel控件(以及carousel指示器)事件处理程序被委托给文档对象，这些元素上的单击事件(prev/next控件，…)将被“忽略”。
$('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();
});
依赖于Twitter Bootstrap下拉隐藏/隐藏事件不是一个解决方案，原因如下:
为两个事件处理程序提供的事件对象没有提供对所单击元素的引用 我无法控制下拉菜单内容，因此添加标志类或属性是不可能的
这个小提琴是正常的行为，这个小提琴是添加了event.stopPropagation()。
更新
谢谢罗曼的回答。我也找到了一个答案，你可以在下面找到。
