Почему this выбирает родителя?

Question

[Combat7]

Вобщем у меня меню вида

<li><a>Пункт1</a>
                <ul>
                    <li><a>Пункт2</a></li>
</ul>
</li>

$("#menu_left li").click(function () {
                    $(this).addClass("active");
     });

Проблема в том, что при клике на подменю, в селекторе почему-то всеравно выбирается родитель, как это решить?

Comments

[Otrivin]

Пример на jsfiddle какой-нибудь, пожалуйста.
Но имхо, клик произошел по обоим li

[Stalker_RED]

Дык у вас и Пункт1 и Пункт2 подходят под селектор "#menu_left li". Ничего удивительного.

как это решить?

Для начала было бы неплохо понять, что вы вообще хотите сделать.

Answer 1

[0xD34F]

const containerSelector = '#menu_left';
const itemSelector = `${containerSelector} li`;
const className = 'active';

Останавливайте всплытие событий:

$(itemSelector).click(function(e) {
  e.stopPropagation();
  $(this).addClass(className);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => {
  e.stopPropagation();
  e.currentTarget.classList.add(className);
});

Или вешайте обработчик на корневой элемент и поднимайтесь от целевого до ближайшего из тех, клики на которых хотите слушать:

$(containerSelector).click(e => {
  $(e.target).closest(itemSelector).addClass(className);
});

// или

document.querySelector(containerSelector).addEventListener('click', e => {
  const li = e.target.closest(itemSelector);
  if (li) {
    li.classList.add(className);
  }
});

Comments

[Combat7]

Блин круто, спасибо!

Answer 2

[Alexander Pushkarev]