CODEWITHSUNDEEP
javascriptjquery
Tomislav Tomi Nikolic
Tomislav Tomi Nikolic

Reputation: 628

Jquery closing on parent click

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>

Upvotes: 6

Views: 361

Answers (4)

Legends
Legends

Reputation: 22672

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.

Upvotes: 1

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24590

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:

Upvotes: 3

FabioCosta
FabioCosta

Reputation: 2749

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
});

Upvotes: 6

Scott Weaver
Scott Weaver

Reputation: 7351

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

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

Upvotes: 2

Related Questions