Basic event stopPropagation() example - a better way of doing so?
Your Question

Is this really the right way of doing this, or is there a better way? Something doesn't feel right here.

The term &quot;better&quot; is subjective so you can judge for yourself. Presuming there is not a need to have clicks on the child elements trigger any event handlers, one alternative is to use the CSS property pointer-events style. One could use the value none:

none
The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.



var test = document.getElementById('test'),
    child = document.getElementById('child');

test.addEventListener('click', function (e) {
  console.log('click on parent without stopping propagation');
});
#test {
  background: red;
  display: flex;
  position: relative;
  height: 30px;
  width: 100%;
}
#child {
  background: pink;
  margin-top: 5em;
  position: absolute;
  pointer-events: none;
}
&lt;div id='test'&gt;
  &lt;div id='child'&gt;child&lt;/div&gt;
&lt;/div&gt;