Habr<p>Самая сложная директива Taiga UI</p><p>Часто необходимо знать, с какой областью страницы взаимодействует пользователь. Например, если вы создаете выпадающее меню, нужно понять, когда его закрывать. Наивная реализация будет просто слушать клики и проверять, произошел ли клик вне элемента выпадающего меню. Но мышь — это не единственный способ взаимодействия, не стоит забывать и про клавиатуру. Кроме того, выпадающее меню может иметь вложенную многоуровневую структуру, что делает простую проверку цели клика проблематичной. В этой статье исследуем директиву ActiveZone — подход, который мы использовали в библиотеке компонентов Taiga UI. Она полагается на два моих любимых инструмента Angular: Dependency Injection и RxJS . Нам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного frontend.</p><p><a href="https://habr.com/ru/companies/tbank/articles/863842/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/tbank/ar</span><span class="invisible">ticles/863842/</span></a></p><p><a href="https://zhub.link/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://zhub.link/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://zhub.link/tags/focus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>focus</span></a> <a href="https://zhub.link/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> <a href="https://zhub.link/tags/directive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>directive</span></a> <a href="https://zhub.link/tags/dependency_injection" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dependency_injection</span></a></p>