How to stop propagating event from parent div to child div

Question

I want to stop propagate event from parent div to child div in my html. Here a simple code what I\'m trying to do:

  

        
                      

              相关标签:
       
      

Answer 1

Check target for match clicked object. Try this code in beginning of click event handler.

if( event.target !== this ) {
       return;
}
//...do stuff.. 

Answer 2

Instead of using e.stopPropagation, I suggest you to use unbind() method in the div <div class='listed-category'> like so...

$('.listed-category').unbind('click');

This will allow to stop the propagation effect for the .listed-category div. The method e.stopPropagation() doesn't work because it just works with parent elements and not with child elements.

You can always create a new function and assign to the .listed-category div afterwards.. You can also check the documentation for the unbind() method at this link: http://api.jquery.com/unbind/

I hope that helps!

Answer 3

http://codepen.io/rakeshcode/pen/KrZdNo

$(document).ready(function(){
  $(".arrow").click(function(){
  $(".row").slideToggle();
  
  });

$(".btn").click(function(event){
   event.stopPropagation();
  //$(".btn").attr("href","www.yahoo.com")
});
})

.btn {
  display: block;
  padding:15px;
  background-color:green;
  width:100px;
  margin-top:15px;
  text-decoration:none;
  margin-left:auto;
  margin-right:auto;
  
  
  
}
.arrow {
  cursor:pointer;
  text-align: center;
  padding:10px 0;
  font-size:15px;
  font-weight:bold;
  background-color:grey;
  margin-top:15px;
}
.container {
  max-width:600px;
  margin-left:auto;
  margin-right:auto; 
}
.close {
  height:75px;
  overflow:hidden;
  transition-duration: 0.3s;  
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.open {
  height:215px;
  overflow: hidden;
  transition-property:height;
  -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;  
  transition-timing-function: ease-in;
}
.up {
  background-color:red; 
}
.down {
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="arrow"> Click here Click here<a class="btn" href="www.google.com" target="_blank">click here</a></div>
  <div class="wrap">
  <div class="row">The most effective plac elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training, ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training.ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this trainingACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training</div>
  </div>
  </div>

Answer 4

you need to stop propagating in child,not parent so you should write this:

 $('.listed-category').click(function(event){
    event.stopPropagation();
});

and if you want to click a tag and stop propagation too,you also need to write this:

 $('a#close').click(function(event){
    event.stopPropagation();
});

Anyways I will suggest Yuriy's answer. I just want you to know that you should put event.stopPropagation() in childrens(if you don't want event of parent is run),instead of parent.

Answer 5

The accepted answer is correct but in a best scenario when you have multiple nested elements, You would like to not cancel the event but to get the actual clicked parent container and work with it.

$('.clicked-container').click((e) => {
    let t = e.target;
    while (!$(t).hasClass( "clicked-container" )) { t = t.parentNode; }
     
    ...
    $(t).toggleClass('active-or-whatever-you-want');
});

Also "this" in the accepted answer doesn't refer anymore to the same thing when you using Arrows => in ES6