Как закрыть элемент, если клик был вне его?

Question

[Анатолий]

Кликаю по input появляется окно, далее кликаю вне этого окна, но окно не закрывается, почему?
По идее должно было сработать это: parent_element.contains(event.target)

Answer 1

[Дмитрий Беляев]

Слушатель клика весит на el_table, то есть клик будет пойман только на нем или его детях. Из этого можно сделать простой вывод, чтоel_table.contains(e.target)всегда вернет true, а следовательно мы никогда не попадем в такой if

UPD:

Comments

[Анатолий]

Так решение-то есть?

У меня идея такая, если выражение ложно: el_table.contains(e.target) то "закрываем" элемент.
Т.е. элемент el_table не содержит e.target.

[Дмитрий Беляев]

Анатолий, ну например слушать клик на document.body, тогда данное условие будет иметь смысл

[Анатолий]

Да действительно ошибся, сейчас исправил, но почему-то окно совсем не появляется. Дописал также, что не закрывать окно, если клик был по input, но не помогло.

[Анатолий]

Пример поправил, заработало.

Answer 2

[LJ322]

Повесьте обработчик на всю страницу, чтобы можно было ловить события кликов по всем её элементам

function win(){
  document.body.append(el_table);
  document.addEventListener('click', closes);
}

А функцию закрытия можно оформить следующим образом, чтобы проверять на какой конкретно элемент пришлось событие:

function closes(e){
  console.log(e.target);
  if (e.target != parent && el_table) {  
    el_table.remove();
  }
}

Comments

[Анатолий]

Обновил.
Теперь при клике даже по окну, оно закрывается.

[Анатолий]

Сам дописал. Спасибо.