Как скрывать блок по клику вне его?

Question

[Андрей Федоров]

Народ помогите.
Вот такой код https://codepen.io/aliencash/pen/qgPvMd

Нужно, чтобы при клике вне серой и красной (когда активна) областей красный блок скрывался.

Прозрачную подложку нельзя. Нужно на основе target.

Answer 1

[0xD34F]

Если надо по-быстрому добиться желаемого поведения...

document.addEventListener('click', function(e) {
  if (!e.target.closest('.tileset-showitems')) {
    tilesetShowListRemove();
  }
});

Но вообще, я бы код переписал - убрал бы инлайновые обработчики клика, класс бы назначал самому блоку, а не вложенному элементу.

- .active {
+ .active .box {

const containerSelector = '.tileset-showitems';
const buttonSelector = `${containerSelector} .tileset-showitems-trigger`;
const activeClass = 'active';
const closeAllExcept = container => document
  .querySelectorAll(`${containerSelector}.${activeClass}`)
  .forEach(n => n !== container && n.classList.remove(activeClass));

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

  if (button) {
    container.classList.toggle(activeClass);
  }

  closeAllExcept(container);
});

window.addEventListener('keydown', e => e.key === 'Escape' && closeAllExcept());