@lagudal

Как на чистом js закрыть элемент по клику вне его?

Есть скрипт, ниже пен, по клику на кнопку - lg-hotspot__button - добавляет класс lg-hotspot--selected к элементу lg-hotspot, таким образом делает видимым элемент lg-hotspot__label.
Как сделать, чтобы класс этот - lg-hotspot--selected - удалялся также если кликнуть на пустое место, кроме элемента lg-hotspot__label, когда он он видим?
На jquery знаю как, но тут весь скрипт на чистом js написан, вот что то не могу сообразить, как сделать на чистом js.
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега JavaScript
document.addEventListener('click', function(e) {
  const hotspot = e.target.closest('.lg-hotspot');
  if (hotspot) {
    hotspot.closest('.lg-container').querySelectorAll('.lg-hotspot').forEach(n => {
      n.classList.toggle('lg-hotspot--selected', n === hotspot);
    });
  } else {
    document.querySelectorAll('.lg-hotspot').forEach(n => n.classList.remove('lg-hotspot--selected'));
  }
});
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Вот вам общий принцип для всех подобных задач:
  1. При открытии элемента — повесить обработчик на body
  2. Внутри обработчика проверить, был ли клик внутри элемента
  3. Если нет — скрыть элемент, удалить обработчик.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Admitad Projects Москва
от 130 000 до 200 000 ₽
Fundraise Up Санкт-Петербург
от 2 500 до 3 500 $
от 5 000 до 6 500 $
29 мая 2020, в 01:41
850 руб./за проект
29 мая 2020, в 00:02
5000 руб./за проект
28 мая 2020, в 23:42
10000 руб./за проект