Как производительней слушать события?

Question

[lavezzi1]

Здравствуйте. Допустим есть класс который выполняет функциональность компонента Dropdown. Написан он по такому принципу, что на верстку этого Dropdown просто вешаешь класс .js-dropdown и все работает. Так вот вопрос, как лучше всего следить за закрытием это Dropdown по клику вне компонента? Нужно следить именно за открытым компонентом? Потому что при дебаге срабатывает метод который закрываем менюшку на всех инстансах. Возможно можно сделать это через касомные события? Подскажите паттерн пожалуйста.

Answer 1

[Павел Корнилов]

document.documentElement.onclick= function(e) {
	if(e.target.className==="js-dropdown") { // or use classList
		// Dropdown не закрыт
	} else // Dropdown закрыт
}

Comments

[Interface]

Во-первых, вы предлагаете (видимо) сравнивать className со строкой, что не будет работать если на элементе не один класс. Вместо className можно использовать либо classList.contains (https://developer.mozilla.org/ru/docs/Web/API/Elem... либо что-то навроде className.split(/\s+/).indexOf(showClass) !== -1

Во-вторых, вы не сравниваете, а присваиваете класс, что видимо ошибка / опечатка.

[Павел Корнилов]

Interface:
1. Если не один класс, использовать classList
2. Да, опечатка, ща подправлю.

[lavezzi1]

Спасибо. А как понять что табам вышел из меню? Ну то есть табал по пунктам меню, пункты кончались и вышел из меню, нужно закрыть его.

[Stalker_RED]

lavezzi1: tabindex blur

[lavezzi1]

Stalker_RED: а как слушать на блюр всю меню если в фокусе ссылки внутри меню?

[Павел Корнилов]

lavezzi1:
Повесить обработчик на общего родителя этих ссылок.