Stop just one dropdown toggle from closing on clic

问题:

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/

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.

Thanks for any help.

回答1:

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.

Just add

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

jsfiddle can be found here

回答2:

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:

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

回答3:

Actually, if you were in Angular.js, it would be more elegant to make a directive for it:

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(...
...

回答4:

Another quick solution, just add onclick attribute to div having class dropdown-menu:

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

回答5:

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.

回答6:

also, prevent click unless clicks a button element

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

回答7:

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.

The below code allowed me to fix my issue.

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

or in ES6 format

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.