How to get the highest parent element of an element that was clicked on that is still a child of the element that the event listener was added to?

Question

How do I get the highest parent element of an element that was clicked on that is still a child of the element that the event listener was added to? Does this exist as a property for the event object?

Answer 1

I think you've to go with the "old-fashion" way with this, i.e. iterate through the event.target parents until the correct child is found.

const target = document.getElementById('currentTarget');
target.addEventListener('click', function(e) {
  let target = e.target,
    parent = target,
    outmost = e.currentTarget;
  console.log('The clicked element is', target.id);
  while (parent) {
    if (parent.parentElement === outmost) {
      break;
    }
    parent = parent.parentElement;
  }
  console.log(parent ? 'Hit ' + parent.id : 'didn\'t hit');
});

div {
  margin: 20px;
  border: 3px solid #ccc;
}

<div id="currentTarget">
  <div id="wantedElement">
    <div id="intermediate1">
      <div id="intermediate2">
        <div id="mostInner"></div>
      </div>
    </div>
  </div>
</div>

This algorithm is generic, it can be used with any HTML structure, and the result doesn't depend on any identifiers of the elements. See a jsFiddle with two children in the outer wrapper.