Jquery closing on parent click

Question

I want a window to close only when pop_up is clicked (as opposed to clicking div contents). E.g. clicking the background layer hides the div. In the code below I don't want it to close #pop_up when clicking the div contents bot only on "pop_up".

How can I do this?

$("#pop_up").click(function() {
    $("#pop_up").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop_up">
  <div id="pop_up_content">
    <h1> world </h1>
  </div>
</div>

You can refer this post: http://stackoverflow.com/questions/2728252/jquery-stoppropagation-bubble-down — Vignesh T.V., Jan 14 '17 at 20:11

score 6 · Answer 1 · edited May 23 '17 at 12:33

6

What you are experiencing is the bubbling and capturing behaviour of events. Check this answer What is event bubbling and capturing? .

The simples approach would be to attach a onClick to the child and stop the bubbling.

$("#pop_up_content").click(function(ev) {
   ev.preventDefault()
   ev.stopImmediatePropagation() // best to use to stop other event listeners from being called
});

edited May 23 '17 at 12:33

Community

1
1

answered Jan 14 '17 at 20:09

FabioCosta

3,069
6
28
50

Aminadav Glickshtein · Accepted Answer · 2017-01-14T20:28:31.790

3

You can use the event argument of the click, and see if the click is inside another element (or it is the element itself)

JSFiddle: https://jsfiddle.net/32mz2x3x/1/

$("#pop_up").click(function(event) {
      if ($(event.target).parents().andSelf().is('#pop_up_content')) {
        return 
    }
    $("#pop_up").hide();
});

I have used parents to check if where you click is inside pop_up_content element, and I used andSelf because maybe you click on #pop_up_content (and not inside it)

More info:

edited Jan 14 '17 at 20:28

answered Jan 14 '17 at 20:14

Aminadav Glickshtein

23,232
12
77
117

2

Yep thats the one, I was trying to do something like this earlier on and now I see where I've failed! Thanks mate! Highly appreciated! – Tomislav Tomi Nikolic Jan 14 '17 at 20:16

score 2 · Answer 3 · answered Jan 14 '17 at 20:09

2

use the form that allows a filter selector, combined with :not():

$("#pop_up").on('click', ':not(#pop_up_content)', function (e) {
    $("#pop_up").hide();
});

answered Jan 14 '17 at 20:09

Scott Weaver

7,192
2
31
43

For some reason its working vice-versa for me, like if u click pop_up_content it will close the pop_up and when you click pop_up it doesnt do anything – Tomislav Tomi Nikolic Jan 14 '17 at 20:14

Legends · Answer 4 · 2017-01-14T21:49:14.070

JSBin: http://jsbin.com/hoyizos/edit?html,css,js,output

$("#pop_up").click(function(e) { 
    if ($(event.target).is($("#pop_up"))){   
        $("#pop_up").hide();  
    }     
});

h1{
  margin:50px 50px;
  background-color:red;
  display:inline;
}

#pop_up_content{
  background-color:yellow;
}

#pop_up{
  margin:10px;

  background-color:green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<div id="pop_up">
            <div id="pop_up_content">pop_up_content
                <h1> world </h1>
            </div>
I am the pop_up!
 </div>
</body>
</html>

Don't cancel event bubbling!: The Dangers of Stopping Event Propagation,
use it only if there is no other way.

Don't use andSelf() if you plan to use jQuery 3.x, because it is deprecated since v1.8 and will be removed in jQuery v3.

Note: This function has been deprecated and is now an alias for .addBack(), which should be used with jQuery 1.8 and later.

If you use jQuery 1.8 < use addBack instead.

Jquery closing on parent click

4 Answers4