Как отловить клик внутри элемента при делегировании события?

Question

[Roweb]

Необходимо отловить клик на child(в том числе на его внутренних элементах, просто e.target.contains не подходит)

<div class="parent">
        <div class="child">
            <span>lorem</span>
            <span>lorem</span>
        </div>
    </div>

let parent = document.querySelector('.parent');
   parent.addEventListener('click', function(e) {

    });

Comments

[Steppp]

А чем .contains('.child') не подходит?

Answer 1

[Дмитрий Беляев]

const parent = document.querySelector('.parent');
const child = parent.querySelector('.child');
parent.addEventListener('click', (e) => {
  if(e.target.closest('.child') !== child) { return; }
  // Мы 100% в child
});

Answer 2

[Steppp]

let parent = document.querySelector('.parent');
const spans = document.querySelectorAll(`span`);

parent.addEventListener('click', function (e) {
  spans.forEach(el => {
    console.log(e.target.contains(el));
  });
});

Comments

[Roweb]

Вложенных элементов может быть очень много и они могут меняться, поэтому не лучшее решение