jQuery切换div，允许在div外部单击以关闭，也允许div内部的所有内容都可点击

Question

I have a toggle event on a div, and I've seen many questions regarding mine but nothing seems to work for what I'm trying to do, it either makes my div disappear in a few seconds, or it just doesn't work. Here's my jsfiddle .

I have a div that needs to toggle when another <div> is clicked. The toggled div has inputs in it that need to be filled out, and a submit button inside it as well. So I need clicks inside the div to be allowed, but only inside my div. So I want the div to show unless the user clicks outside of this div.

I'm using this query which toggles fine:

$('#MyDiv').click(function (event) {
  $("#ToggledDiv").slideToggle();
});

And then this coding to hide it when clicked outside of the div which doesn't work:

$(window).click(function () {
  $("ToggledDiv").hide();
});

I've tried solutions with e.preventDefault(); but that doesn't work, or $(document).click, even mousedown but it just doesn't flow how I want, it'll hide it within a few seconds, or it will prevent the toggle from even working so I'm lost.

Answer 1

Take a look at the event when you click inside the #targetDiv . There are two properties you can use to evaluate what action to perform: event.target and event.currentTarget . In this case:

$('#ToggledDiv').on('click', function(event) {
    console.log(event.target, event.currentTarget);
});

This is a good way to see if what clicked is actual target or a child element in the target.

Answer 2

To add to Chris' answer, you can see here that I check that the e.target is not inside the form using vanilla Node.contains , and also not the button...

https://jsfiddle.net/jmLdp45s/3/

var $button = $('button');
var $form = $('form');

$button.click(function() {
  $form.slideToggle();
});

$(window).click(function(event) {
  if (
    !$form.get(0).contains( event.target ) // target is not inside form
    && event.target !== $button.get(0) // target is not button
  ) $form.hide();
});

Answer 3

The reason behind this behavior is Event Bubbling and Capturing of HTML DOM API.

You can use event.stopPropagation() OR event.cancelBubble = true to prevents the event from bubbling up to the DOM tree, preventing any parent handlers from being notified of the event.

Another good article: events order

 $('#MyDiv').click(function(event) { $("#ToggledDiv").show(); disabledEventPropagation(event); //console.log('2nd event'); }); $('#ToggledDiv').click(function(event) { disabledEventPropagation(event); //console.log('3rd event'); }); $(document).click(function() { $("#ToggledDiv").hide(); //console.log('1st event'); }); function disabledEventPropagation(event) { if (event.stopPropagation) { event.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="MyDiv" style="background-color:yellow"> click me to open </div> <div id="ToggledDiv" style="display: none;background-color:yellow"> <input type="text" /> <input type="submit" /> </div>