单击关闭时仅停止一个下拉切换

Posted 2023-02-22

【中文标题】单击关闭时仅停止一个下拉切换

【英文标题】：Stop just one dropdown toggle from closing on click

【发布时间】：2012-07-21 22:55:53

【问题描述】：

我有一个按钮下拉菜单（只有一个，不是全部），在其中，我希望有几个输入字段，人们可以在其中输入内容，而不会在您单击它时立即隐藏下拉菜单（但它如果您在外部单击，它会关闭）。

我创建了一个 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，但我想不通。

感谢您的帮助。

【参考方案1】：

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

只需添加

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

jsfiddle 可以找到here

【讨论】：

太棒了，我对其进行了一些调整，因为我只需要一些下拉菜单就可以不做正常的行为，通过添加一个类，并在你的代码中检查它......如果有兴趣，请参阅小提琴。 jsfiddle.net/denislexic/8afrw/8

您也可以只阻止对特定课程的点击，因此您只需保留正常的下拉菜单。 js fiddle here

这是一个很好的答案。使用它，但遇到了问题。对于那些手头有一些额外时间的人，阅读这篇文章可能会很有趣：css-tricks.com/dangers-stopping-event-propagation

如果您想处理下拉列表中子项的点击事件***.com/questions/25089297/…

如果你想禁用下拉菜单的所有自动关闭，你可以禁用监听器。 $('html').off('click.dropdown')

【参考方案2】：

我知道这个问题不是针对 Angular 本身的，但是对于使用 Angular 的任何人，您都可以从 HTML 传递事件并通过 $event 停止传播：

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

【讨论】：

议会，很好的答案！我想知道你怎么能捕捉到菜单外的点击...

你是救生员。非常感谢。

【参考方案3】：

在尝试了很多技术后，我发现最好用的一种，没有缺点，甚至很简单：

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

这让您还可以对下拉列表中的内部元素进行一些实时绑定。

【讨论】：

最适合我的解决方案

【参考方案4】：

另外，除非点击按钮元素，否则阻止点击

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

【参考方案5】：

实际上，如果你在 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(...
...

【参考方案6】：

另一个快速解决方案，只需将onclick 属性添加到具有dropdown-menu 类的div：

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>

【参考方案7】：

我遇到了这个问题，但在反应组件中 - 反应组件位于带有表单的引导下拉菜单中。每次单击下拉列表中的元素时，它都会关闭，从而导致在表单中输入任何内容时出现问题。

通常的e.preventDefault() 和e.stopPropagation() 在react 应用程序中不起作用，因为jquery 事件被立即触发并且react 试图在此之后进行干预。

下面的代码让我可以解决我的问题。

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

或 ES6 格式

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

希望这对尝试在反应中使用它时遇到其他答案的人有用。