停止在特定元素上的传播
停止在特定元素上的传播
提问于 2017-12-11 17:00:03
我有一个下拉菜单在一个头部使用引导带data-toggle="dropdown"。单击“下拉”按钮时，应该会出现一个列表。当您单击标题时，内容应该上下滑动。
问题是，当我单击下拉按钮时，它也会触发标题。这里通常的答案是e.stopPropagation，但是当我使用它时，它也会阻止下拉菜单的出现。
如何防止下拉按钮触发标题？
<div id="top">
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
Show List
</button>
<ul class="dropdown-menu">
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
</ul>
</div>
</div>
<div id="content" class="collapse">
This is the actual content
</div>JS
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function() {
$('#content').collapse('toggle')
})
$('button').click(function(e) {
//e.stopPropagation();
})我准备了一个小提琴来说明这个问题。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-12-11 17:06:46
相反，您应该过滤有关单击event.target的#top元素：
$('#top').click(function(e) {
if($(e.target).closest('button[data-toggle], .dropdown-menu').length) return;
$('#content').collapse('toggle')
})
Stack Overflow用户
发布于 2017-12-11 17:13:39
你也可以这么做。
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function(e) {
if(e.target.type != "button"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})Stack Overflow用户
发布于 2017-12-11 17:29:20
另一种方法是使用e.target来确定单击元素是否为#top。
$('#top').click(function(e) {
if(e.target.id=="top"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47757738
复制相关文章
相似问题
腾讯云开发者
