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>

Answer 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>