Event is bubbling to parent even with stopPropagation?

Question

Is stop propagation not meant to stop bubbling to a parent element?

I know to check for the event target in this case, I am just wondering why stopPropagation, which the word alone smacks of preventing just this issue, doesnt perform that way.

https://jsfiddle.net/hzo9eq9m/

var child = document.querySelector('.parent')
    .addEventListener('click',function(e){
        e.stopPropagation();
        $(this.querySelector('.child')).toggleClass('selected');
        console.log(e);
    },
false);

.society {
  padding:10px;
  background-color:green;
  position:relative;
}

.parent {
  background-color:red;
  width:60%;
  margin-left:30%;
}

.child {
  width: 100%;
  background-color:pink;
  position:absolute;
  top:0;
  left:0;
  width:0;
  max-width:0px;
  max-height:0px;
  transition: max-width 1s, max-height 1s;
  overflow:hidden;
}

.child.selected {
  top:0;
  left:0;
  width:100%;
  max-width:1000px;
  max-height:1000px;
}

<div class="society">
  <div class="parent">
     parent
    <div class="child">
      child
    </div>
  </div>
</div>

What's your issue? You only have one event listener here so I'm not sure what behaviour you're expecting from [`Event.stopPropagation`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)... — André Dion, Mar 27 '16 at 23:55
Im expecting the click event attached to the parent to not fire when the child is clicked. Click parent and when child opens, if child is clicked, the event on parent is fired. stopPropagation claims to prevent it. — Magic Lasso, Mar 28 '16 at 00:00
No, if you use `stop propagation` on `child`, than it would not bubble up to the `parent` — The Process, Mar 28 '16 at 00:01
You don't have an event listener bound to `.child` so there's no event to stop. The click is propagating up from `.child` to `.parent`'s handler, at which point any further handlers would not be called. — André Dion, Mar 28 '16 at 00:02

score 1 · Accepted Answer · answered Mar 28 '16 at 00:07

1

If you wanted to prevent clicks on .child from propagating, you'd have to bind a click handler on .child:

document.getElementById('parent').addEventListener('click', function(e) {
  alert('parent');
}, false);

document.getElementById('child').addEventListener('click', function(e) {
  alert('child');
  e.stopPropagation(); // if this isn't called, you'll get 2 alerts when clicking on #child
}, false);

#parent { background-color: yellow; }

#child { background-color: red; }

<div id="parent">
  Parent
  <div id="child">
    Child
  </div>
</div>

answered Mar 28 '16 at 00:07

André Dion

19,231
7
52
59

Cool that was the answer I was looking for. I know all the ways to stop the event from firing from the child but the description of stopPropagation reads as though it would automatically prevent bubbling. – Magic Lasso Mar 28 '16 at 00:10
@MagicLasso, if you want to save yourself some code you should check out [Event Delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). – André Dion Mar 28 '16 at 00:12
I was viewing event delegation more as an object unto itself where the stopPropagation for example belonged to the event rather than to the dom-element so that stopPropagation would check if the event had bubbled (e.target === 'parent') and stop the event from activating if it had. In this case it actually belongs to the elements though so that the event bubbles and then fires once it is used asked for and then stops the event. The poor poor poor part of this is that the event object has no trace of which element actually used the event. Ill take a look at that link. Thanks – Magic Lasso Mar 28 '16 at 00:17

score 0 · Answer 2 · answered Mar 28 '16 at 00:01

Yes, that is exactly what it does!

Your code listens for a click on elements with the parent class and toggles the selected class on all elements with the child class. Was this not the intention?

If you add an event for the child with stopPropagation, the parent click would not fire:

var parent = document.querySelector('.parent').addEventListener('click',function(e){
    e.stopPropagation();
  $(this.querySelector('.child')).toggleClass('selected');
  console.log(e);
},false);
var child = document.querySelector('.child').addEventListener('click',function(e){
    e.stopPropagation();
  $(this).toggleClass('selected');
  console.log(e);
},false);

Event is bubbling to parent even with stopPropagation?

2 Answers2