Почему не могу проверить что e.target содержит класс '.tab-header'?

Question

[Андрей Иванов]

let tabsHeader = document.querySelector('.tabs-header'),
      tabHeader = document.querySelectorAll('.tab-header'),
      tabContent = document.querySelectorAll('.tab-content');

  tabsHeader.addEventListener('click', function() {
    if (this.contains('.tab-header')) {
      alert(2342);
    }
  });

Code

Answer 1

[0xD34F]

Во-первых - не вижу, чтобы в показанном огрызке кода вы как-либо пытались работать с target. Вижу this. Через this доступен элемент, к которому прицеплен обработчик события. И поскольку внутри этого элемента у вас есть другие, то совпадать this и target будут не всегда.

Во-вторых - сомневаюсь, что вы хотите проверять наличие заявленного класса. Потому что оно больше похоже не на класс, а на селектор по классу, а класса с точкой в начале у вас нигде нет.

В-третьих - вы пытаетесь использовать несуществующий метод, у элементов нет contains. Но есть matches, который проверяет не наличие класса, а соответствие элемента селектору. А contains - он у classList.

Исправляем код - в список параметров обработчика добавляем e, а вместо this.contains('.tab-header') пусть будет один из следующих вариантов:

e.target.classList.contains('tab-header')

// или

e.target.matches('.tab-header')

// или, если вдруг в будущем внутри .tab-header появятся ещё элементы, то проверять
// надо будет не наличие класса у target, а наличие у target предка с классом

e.target.closest('.tab-header')

Comments

[Андрей Иванов]

А как узнать какой индекс у '.tab-header' на котором кликнул ?

[0xD34F]

const index = Array.prototype.indexOf.call(
  this.querySelectorAll('.tab-header'),
  e.target
);