Javascript 单击时停止只关闭一个下拉切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11617048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop just one dropdown toggle from closing on click
提问by denislexic
I have a button dropdown (just one, not all of them), and inside of it, I want to have several input field where people can type stuff inside without the dropdown hiding as soon as you click on it (but it does close if you click outside of it).
我有一个按钮下拉菜单（只有一个，不是全部），在它里面，我想有几个输入字段，人们可以在其中输入内容，只要你点击它就可以在不隐藏下拉菜单的情况下（但它会关闭，如果你在它外面点击）。
I created a jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/
我创建了一个 jsfiddle：http: //jsfiddle.net/denislexic/8afrw/2/
And here is the code, it's basic:
这是代码，它是基本的：
<div class="btn-group" style="margin-left:20px;">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>Email<input type="text" place-holder="Type here" /></li>
<li>Password<input type="text" place-holder="Type here" /></li>
</ul>
</div>?
So basically, I want it to not close on click of the dropdown (but close on click of the action button or outside the dropdown). My best guess so far was to add a class to it and try to do some JS, but I couldn't figure it out.
所以基本上，我希望它不会在单击下拉菜单时关闭（而是在单击操作按钮或在下拉菜单外关闭）。到目前为止，我最好的猜测是向它添加一个类并尝试做一些 JS，但我无法弄清楚。
Thanks for any help.
谢谢你的帮助。
回答by CraigTeegarden
The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element.
问题是当您单击其他任何地方时，boostrap 下拉 jQuery 插件会关闭下拉菜单。您可以通过捕获下拉菜单元素上的单击事件并防止它到达 body 元素上的单击事件侦听器来禁用该行为。
Just add
只需添加
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});?
jsfiddle can be found here
jsfiddle 可以在这里找到
回答by parliament
I know this question isn't for Angular per se, but for anyone using Angular you can pass the event from the HTML and stop propagation via $event:
我知道这个问题本身不适合 Angular，但对于任何使用 Angular 的人，您都可以从 HTML 传递事件并通过 $event 停止传播：
<div ng-click="$event.stopPropagation();">
<span>Content example</span>
</div>
回答by Nahn
Actually, if you were in Angular.js, it would be more elegant to make a directive for it:
实际上，如果你在 Angular.js 中，为它制定一个指令会更优雅：
app.directive('stopClickPropagation', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.click(function(e) {
e.stopPropagation();
});
}
};
});
And then, on the dropdown-menu, add the directive:
然后，在下拉菜单上，添加指令：
<div class="dropdown-menu" stop-click-propagation>
my dropdown content...
<div>
Especially if you want to stop propagation for multiple mouse events:
特别是如果您想停止多个鼠标事件的传播：
...
element.click(function(e) {
e.stopPropagation();
});
element.mousedown(...
element.mouseup(...
...
回答by Hassan Talha
Another quick solution, just add onclickattribute to div having class dropdown-menu:
另一个快速解决方案，只需将onclick属性添加到具有 class 的 div dropdown-menu：
<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
回答by Julian Xhokaxhiu
After trying a lot of techniques I found that the best one to use, that causes no drawbacks which is even simple:
在尝试了很多技术后，我发现最好使用的技术，它不会导致任何缺点，甚至很简单：
$(document)
.on( 'click', '.dropdown-menu', function (e){
e.stopPropagation();
});
Which lets you also do some live binding for inner elements inside dropdowns.
这使您还可以对下拉列表中的内部元素进行一些实时绑定。
回答by Elise Chant
also, prevent click unless clicks a button element
此外，除非单击按钮元素，否则防止单击
$('.dropdown-menu').click(function(e) {
if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
回答by Sprose
I had this issue but in a react component - the react component was in a bootstrap dropdown menu with a form. Every time an element inside the dropdown was clicked it would close, causing issues inputting anything in the form.
我遇到了这个问题，但是在反应组件中 - 反应组件位于带有表单的引导下拉菜单中。每次单击下拉列表中的元素时，它都会关闭，从而导致在表单中输入任何内容时出现问题。
The usual e.preventDefault()and e.stopPropagation()would not work in the react app due to the jquery event being fired immediately and react trying to intervene after this.
通常e.preventDefault()并e.stopPropagation()不会工作的，由于jQuery的事件之中立即触发和应对试图在此之后进行干预反应的应用程序。
The below code allowed me to fix my issue.
下面的代码允许我解决我的问题。
stopPropagation: function(e){
e.nativeEvent.stopImmediatePropagation();
}
or in ES6 format
或 ES6 格式
stopPropagation(e){
e.nativeEvent.stopImmediatePropagation();
}
Hope this can be of use to anyone struggling with the other answers when trying to use it in react.
希望这对任何在尝试将其用于反应时与其他答案苦苦挣扎的人都有用。
