Почему событие отслеживается только при клике в определенном месте div?

Question

[Deadorik]

В диве svg иконка:

<div data-action="delete" class="clear_btn"
                        ><img
                          src="/source/icons/icons_menu/Trash_light.svg"
                          alt=""
                          class="clear_icon"
                      /></div>

Отслеживаю это событие через js:

const modaleCart = document.querySelector(".modale_cart");
modaleCart.addEventListener("click", function (e) {
  if (e.target.hasAttribute("data-action")) {
    console.log("Item delete");
  }
});

Событие срабатывает только если кликнуть ниже иконки. Делал div строго 24x24px, не помогло. Почему так? Из css там только flex. Смотрю через консоль разработчика разметка стоит на своих местах.

Comments

[Deadorik]

Ответ нашел, при клике js ловит только svg иконку, без контейнера. Подскажите, почему так?

Answer 1

[Rsa97]

if (e.target.closest('.clear_btn')?.hasAttribute("data-action")) {

При клике по svg в e.target будет именно она, а не div, в котором она находится.
e.target - это именно элемент, на котором произошло событие, а он может не совпадать с элементом, на котором висит обработчик.

Answer 2

[dollar]

".modale_cart" - это другой див, а не тот, который содержит иконку.
Где-то в вашей структуре вложенности дивов есть элемент, который тоже отслеживает клик, но не передаёт его дальше по цепочке, а как бы съедает (оставляет инфу о клике только себе, монопольно).

Ищите, смотрите другие обработчики. Наверняка там что-то типа:
.stopPropagation()

P.S. Ссылка по теме: https://learn.javascript.ru/event-delegation