javascript - Jquery closing on parent click - Stack Overflow|江阴雨辰互联

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=".1.1/jquery.min.js"></script>
<div id="pop_up">
  <div id="pop_up_content">
    <h1> world </h1>
  </div>
</div>

How can I do this?

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

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

Share Improve this question edited Jan 14, 2017 at 20:51 clearlight 12.6k11 gold badges60 silver badges82 bronze badges asked Jan 14, 2017 at 20:03 Tomislav Tomi Nikolic 6384 gold badges10 silver badges15 bronze badges

You can refer this post: stackoverflow./questions/2728252/… – Vignesh T.V. Commented Jan 14, 2017 at 20:11

Add a ment |

4 Answers 4

Sorted by: Reset to default 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
});

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/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:

jQuery andSelf function
jQuery is function
jQuery parents function
jQuery event object

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

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

JSBin: http://jsbin./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./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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745227631a4617536.html

javascript - Jquery closing on parent click - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Jquery closing on parent click - Stack Overflow

4 Answers 4

相关推荐