Как в javascript “закрывать” div при клике вне этого дива (без jQuery на codepen оставлю ссылку)?

Вопрос-ответ JavaScript
1

Необходимо, по клику на элемент отобразить список, и когда мы нажимаем не в его области зарывать его. Не могу до конца реализовать этот функционал, предскажите добрым словом. Спасибо.
codepen:

2

С точки зрения DOM клик вне списка означает что среди родителей элемента, по которому произошел клик, нет узла списка.

// https://raw.githubusercontent.com/podgorniy/javascript-toolbox/master/top_walker.js
function top_walker (node, test_func, last_parent) {
	while ( node && node !== last_parent ) {
		if ( test_func(node) ) {
			return node;
		}
		node = node.parentNode;
	}
}

// Предполагаю что эти переменные объявлены
// var openedDiv
// function closeDiv(div) {}

document.documentElement.addEventListener('click', function (event) {
	var isClickWithinOpenedDiv = top_walker(event.target, function (node) {
		return node === openedDiv
	})
	if (isClickWithinOpenedDiv) {
		closeDiv(openedDiv)
	}
}, true)
2 лайка
3

dmitry, cпасибо Вам за помощь, но не могу доделать до конца ваш пример. Посмотрите пожалуйста на codepen, что не так делаю?

4
  1. Ошибка в условии о том когда скрывать список

Было

if (isClickWithinOpenedDiv) {
	closeDiv(list)
}

Стало

if (isClickWithinOpenedDiv) {
	closeDiv(list)
}
  1. Ошибка в функции скрытия дива
    Было
    if (openedElem && openedElem.style.display = 'block')
    стало
    if (openedElem && openedElem.style.display === 'block')

Результат:
https://codepen.io/anon/pen/jaQdPg

5

Спасибо Вам огромное, всё изучил внимательно. Понял, что у меня слабые знание в работе с событиями. Очень помогли! Не совсем понятно, зачем нам 3-й аргумент в функции ‘top_walker’ ? (мы его как вижу не используем)

6

Это библиотечная функция (поэтому поставил ссылку на гитхаб). Библиотечная функция реализована с запасом гибкости.