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

Question

[Николай]

Добрый день!
Почему клик отрабатывает только при клике в область контента элемента, но при клике в область paddind не срабатывает?

<li class="langs">
<span class="langs__link langs__link--active"><i class="langs__icon langs__icon--en"></i></span>
            <ul class="langs__dropdown">
              <li class="langs__dropdown-item"><a class="langs__link" href="#"><i class="langs__icon langs__icon--en"></i></a>
              </li>
              <li class="langs__dropdown-item"><a class="langs__link" href="#"><i class="langs__icon langs__icon--en"></i></a>
              </li>
              <li class="langs__dropdown-item"><a class="langs__link" href="#"><i class="langs__icon langs__icon--en"></i></a>
              </li>
            </ul>
          </li>

/* выпадающее меню для выбора языка*/
var lengsMenu = document.querySelector('.langs');
var lengsMenuDropdown = document.querySelector('.langs__dropdown');
lengsMenu.addEventListener('click', function(){
	this.classList.toggle('langs--active');
	this.querySelector('.langs__dropdown').classList.toggle('langs__dropdown--active');
})
function closeLangsMenu(e) {
	if(!e.target.matches('.langs *')) {
			lengsMenu.classList.remove('langs--active');
			lengsMenuDropdown.classList.remove('langs__dropdown--active');
	}
};
window.addEventListener('click', closeLangsMenu);

Answer 1

[hzzzzl]

сюда бы еще кусочек css, а то иначе непонятно
https://codepen.io/anon/pen/moXrvv

красное - это margin, оно не принадлежит к элементу
паддинг зеленый

Comments

[Николай]

Я понимаю, что есть что. Стили добавляются только при клике в область контента. Padding тоже должен отработать он ведь является частью содержимого. Добавил стилей в код в впоросе

[Николай]

Если убрать этот код, то все работает как надо

function closeLangsMenu(e) {
	if(!e.target.matches('.langs *')) {
			lengsMenu.classList.remove('langs--active');
			lengsMenuDropdown.classList.remove('langs__dropdown--active');
	}
};
window.addEventListener('click', closeLangsMenu);

Answer 2

[Max Abzalov]

Вы тоглите стили на другом элементе верстке, выглядит так, будто ваш css отрабатывает на не том элементе, какой вы задумали.

Comments

[Николай]

Если убрать этот код, то все работает как надо

function closeLangsMenu(e) {
	if(!e.target.matches('.langs *')) {
			lengsMenu.classList.remove('langs--active');
			lengsMenuDropdown.classList.remove('langs__dropdown--active');
	}
};
window.addEventListener('click', closeLangsMenu);