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

Question

[lagudal]

Есть скрипт, ниже пен, по клику на кнопку - lg-hotspot__button - добавляет класс lg-hotspot--selected к элементу lg-hotspot, таким образом делает видимым элемент lg-hotspot__label.
Как сделать, чтобы класс этот - lg-hotspot--selected - удалялся также если кликнуть на пустое место, кроме элемента lg-hotspot__label, когда он он видим?
На jquery знаю как, но тут весь скрипт на чистом js написан, вот что то не могу сообразить, как сделать на чистом js.

Answer 1

[Alex]

Вот вам общий принцип для всех подобных задач:

1. При открытии элемента — повесить обработчик на body
   
2. Внутри обработчика проверить, был ли клик внутри элемента
   
3. Если нет — скрыть элемент, удалить обработчик.
   

Answer 2

[0xD34F]

const containerSelector = '.lg-container';
const itemSelector = `${containerSelector} .lg-hotspot`;
const buttonSelector = `${itemSelector} .lg-hotspot__button`;
const activeClass = 'lg-hotspot--selected';

document.addEventListener('click', ({ target: t }) => {
  const button = t.closest(buttonSelector);
  const item = t.closest(itemSelector);

  if (button) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList[n === item ? 'toggle' : 'remove'](activeClass);
    });
  } else if (!item?.classList.contains(activeClass)) {
    document.querySelectorAll(itemSelector).forEach(n => {
      n.classList.remove(activeClass);
    });
  }
});

Если не должно быть так, что одновременно могут быть видимы всплывающие окна в разных контейнерах, тогда item.closest(containerSelector) надо заменить на document.

Comments

[lagudal]

так получается, что закрывается по клику на любое место по экрану, кроме самого хотспота.(.lg-hotspot__button)
А я как раза хотел бы, чтобы

класс этот - lg-hotspot--selected - удалялся также если кликнуть на пустое место, кроме элемента lg-hotspot__label, когда он он видим

т.е. клик по пустому месту, в т.ч. и по кнопке - закрыть, клик по открытому окну с информацией - не закрывать.

[0xD34F]

Я в курсе, что код делает не совсем то, что вам надо. Непонятно только, что не так - вам же не нужна моя помощь. Так и прошли бы мимо.

Исправленная версия будет опубликована... ну, скажем, через неделю. Или через месяц. В общем, когда мне покажется, что вопрос для вас утратил актуальность.

UPD (01.09.2020). Ну вот и подъехала обновлённая версия ответа.