Почему event.target выбирает не самый вложенный элемент?

Question

[mishapsv]

Здесь демо.
При разрещении > 800px event.target равен .tags__item - как и надо.
Но если меньше (свернутое меню), то event.target выбирает tags__inner
Не могу понять почему.

(задача сделать функцию selectTab(), которая будет вешать класс на нужный таб при клике).

Answer 1

[Антон Швец]

потому что

@media @tablet {
            padding: 0 9px 0 27px;
            display: none;
            margin-right: 0;
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

при уменьшении размера накладывается pointer-events: none;
и вложенные

<a class="tags__item" href="#0">First element</a>
<a class="tags__item" href="#0">Second element</a>
<a class="tags__item" href="#0">Third element</a>

перестают реагировать на события.

Ближайший элемент реагирующий на click оказывается div#tags, который собственно этот клик и ловит.
На линках кстати и курсор перестает становиться pointer, как только срабатывает @tablet

Comments

[mishapsv]

Антон ох, спасибо, спасли меня)