停止从关闭点击一个下拉开关点击

问题描述：

我有一个按钮下拉（只有一个，而不是所有的人），并在里面，我想有几个输入字段，人们可以在里面输入的东西没有下拉隐藏作为一旦你点击它（但它会关闭，如果你点击它）。停止从关闭点击一个下拉开关点击

我创建了一个的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，但我无法弄清楚。

感谢您的任何帮助。

答

问题是，当你点击其他任何地方时，boostrap下拉式jQuery插件关闭了drop-menu。您可以通过捕获下拉菜单元素上的点击事件并阻止其到达body元素上的点击事件侦听器来禁用该行为。

只需添加

$('.dropdown-menu').click(function(event){ 
    event.stopPropagation(); 
});

的jsfiddle可以发现here

令人惊讶的是，我稍微调整了一下，因为我只需要一些下拉菜单不要做正常的行为，通过向它添加一个类并在代码中检查它......如果感兴趣，请参阅小提琴。 http://jsfiddle.net/denislexic/8afrw/8/ – denislexic 2012-07-24 11:04:58

你也可以只阻止点击某个特定的课程，所以你不用担心正常的下拉菜单。 [js fiddle here]（http://jsfiddle.net/8afrw/9/） – CraigTeegarden 2012-07-24 15:08:14

哈，是的，这很容易，谢谢。 – denislexic 2012-07-24 15:28:57

答

我知道这个问题是不是对角本身，而是使用角的人，你可以从HTML传递事件，并停止传播通过$事件：

<div ng-click="$event.stopPropagation();"> 
    <span>Content example</span> 
</div>

议会，很好的回答！我不知道你怎么能赶上菜单外的点击... – Urigo 2014-09-05 12:06:31

你是一个救生员。万分感谢。 – sfendell 2014-11-10 21:10:00

不客气:) – parliament 2014-11-11 01:38:40

答

尝试了很多方法后，我发现，最好的使用，导致没有缺点，这些缺点是即使是简单的：

$(document) 
.on('click', '.dropdown-menu', function (e){ 
    e.stopPropagation(); 
});

它可以让你也做一些活里的下拉列表内的元素结合。

对我来说最好的解决方案 – 2017-06-03 17:43:15

答

也，防止点击除非点击一个按钮元素

$('.dropdown-menu').click(function(e) { 
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation(); 
});

答

其实，如果你在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>

答

我有这个问题，但在反应组件 - 反应成分是在引导下拉带有表单的菜单。每次单击下拉菜单中的某个元素时，该元素都会关闭，从而导致在表单中输入任何内容。

通常的e.preventDefault()和e.stopPropagation()将无法在反应应用程序中工作，因为jquery事件被立即触发，并在此之后尝试干预。

下面的代码允许我解决我的问题。

stopPropagation: function(e){ 
    e.nativeEvent.stopImmediatePropagation(); 
}

或ES6格式

stopPropagation(e){ 
    e.nativeEvent.stopImmediatePropagation(); 
}

希望这可以利用任何人试图在使用它反应过来的时候与其他的答案中挣扎。

停止从关闭点击一个下拉开关点击

相关推荐