我有一个按钮,下拉菜单(只有一个,不是所有的人),并在它的内部,我想有几个输入字段,人们可以在里面输入的东西,而下拉尽快躲在你点击它(但它接近,如果你点击它之外)。
我创建了一个的jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/
这里是代码,这是基本的:
<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>
所以基本上,我希望它不是关闭在下拉菜单中点击(但接近的动作按钮的点击或外部下拉)。 我最好的猜测,到目前为止是一个类添加到它,并尝试做一些JS,但我无法弄清楚。
谢谢你的帮助。
问题是,自举下拉jQuery插件,当你点击其他地方关闭下跌菜单。 您可以通过捕获您的下拉菜单元素上的点击事件,并从体内元素达到click事件监听器保持它禁用该行为。
只需添加
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});
的jsfiddle可以发现这里
我知道这个问题是不是对角本身,而是使用角的人,你可以从HTML传递事件,并停止通过$事件传播:
<div ng-click="$event.stopPropagation();">
<span>Content example</span>
</div>
其实,如果你在Angular.js,这将是更优雅,使一个指令吧:
app.directive('stopClickPropagation', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.click(function(e) {
e.stopPropagation();
});
}
};
});
然后,在下拉菜单上,添加指令:
<div class="dropdown-menu" stop-click-propagation>
my dropdown content...
<div>
特别是如果你想停止传播多个鼠标事件:
...
element.click(function(e) {
e.stopPropagation();
});
element.mousedown(...
element.mouseup(...
...
另一种快速的解决方案,只需添加onclick
属性的div上课dropdown-menu
:
<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
尝试了很多方法后,我发现,最好的使用,导致没有缺点,这是更简单:
$(document)
.on( 'click', '.dropdown-menu', function (e){
e.stopPropagation();
});
它可以让你也做一些活里的下拉列表内的元素结合。
同时,防止点击除非点击一个按钮元素
$('.dropdown-menu').click(function(e) {
if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
我有这个问题,但在反应组件 - 反应成分是与形式的自举下拉菜单。 每次下拉中的元素被点击,将关闭,导致输入形式的任何问题。
通常e.preventDefault()
和e.stopPropagation()
不会在反应应用由于jQuery的事件正在工作立即触发和应对试图在此之后进行干预。
下面的代码让我解决我的问题。
stopPropagation: function(e){
e.nativeEvent.stopImmediatePropagation();
}
或ES6格式
stopPropagation(e){
e.nativeEvent.stopImmediatePropagation();
}
希望这可以利用任何人试图在使用它反应过来的时候与其他的答案中挣扎。