title: How can I pass an onclick event to the deepest element if two elements are nested?
body: <p>I have the following HTML: </p>
  
  <pre><code>&lt;div class='parent'&gt;
      &lt;div class='child'&gt;
          &lt;div class='child-of-child'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then execute the following javascript to add even listeners to my <code>div</code>s:</p>
  
  <pre><code>var addOnClickListenerToSelfAndChildren = function(el) {
      el.onclick = onclickfunction;
      var children = el.children;
      for (var i = children.length - 1; i &gt;= 0; i--) {
          addOnClickListenerToSelfAndChildren(children[i]);
      }
  }
  
  var parent = document.getElementsByClassName('parent')[0];
  addOnClickListenerToSelfAndChildren(parent);
  </code></pre>
  
  <p>This works great, except that I would like ONLY THE DEEPEST node to register the click. This means that if <code>child-of-child</code> receives the click event, then 'child' and 'parent' will ignore it. How can this be achieved?</p>
  
  <p>Here is a little picture to clarify things: 
  <a href="https://i.stack.imgur.com/j6baa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j6baa.png" alt="Graphical representation of problem"></a></p>
  
  <p>If child receives onclick, I don't want to trigger parent's onclick. However if I click in the <code>parent</code> region, then the click must be registered by 'parent'. I guess you could say I want the children to be 'click opaque'.</p>