Как слушать клик в child div-ах?

Question

[maestro07]

Использую 2gis в проекте. 2gis сам рисует div элементы.
На карте есть маркеры(попап). Мне надо узнать именно какой маркер был нажат?

let list = document.getElementById('mapwrapper').getElementsByClassName('leaflet-marker-pane')[0].getElementsByClassName('leaflet-interactive');
console.log(list);

let tmp = document.getElementById('mapwrapper').getElementsByClassName('leaflet-marker-pane')[0].getElementsByClassName('leaflet-interactive')[0].addEventListener('click', e => {
        console.log(e);
        console.log(e.target);
});

в div-е классом leaflet-interactive есть N div-ов. При клике на маркер, когда открывается попап добавляется класс dg-customization__marker_disappear.
Как привязать addEventListener для child div?

и вообще как можно во vue реализовать обработчик на div элементы?

Answer 1

[hzzzzl]

у этих дивов есть какой то общий селектор, по которому их можно отловить?
в крайнем случае наверно сработает по селектору "div.leaflet-interactive > div" или как то так

document.body.addEventListener('click', e => {
  if(e.target.matches('.super-selector')) { 
    // e.target - кликнутый элемент
  }
})

Comments

[maestro07]

<div class="leaflet-marker-icon dg-customization__marker dg-customization__marker_type_mushroom leaflet-zoom-animated leaflet-interactive dg-customization__marker_appear" tabindex="0" style="margin-left: -10px; margin-top: -32px; width: 22px; height: 34px; transform: translate3d(104142px, -86506px, 0px); z-index: -86506;"></div>

вот таких N штук в document.getElementById('mapwrapper').getElementsByClassName('leaflet-marker-pane')[0].getElementsByClassName('leaflet-interactive');

Answer 2

[Антон Антон]

Вероятно можно обойтись прослушиванием клика на родительском элементе? Почитайте про параметр useCapture у addEventListener https://habr.com/ru/post/126471/