Почему не работает скрытие блока при клике вне элемента?

Question

[Михаил]

Есть тривиальная задача - скрывать элемент, при клике вне этого самого элемента.
Скрытие и появление элемента тоглиться классом open.

Варианты, которые я использовал:

document.addEventListener('click', function(e) {
	// console.log(e.target);
	// var target = e.target;
	var its_popup = Boolean(e.target == popup || popup.has(e.target));
	var popup_is_open = $('.contact-popup').hasClass('open');
	console.log(its_popup); //при проверке всегда выдает true, даже при клике вне блока!
	console.log(popup_is_open);

	if (!its_popup && popup_is_open) {
		$('.contact-popup').toggleClass('open');
	}
});

///////
$(document).mouseup(function (e) {
	console.log(e.target);
	var container = $(".contact-popup__block");
	if (container.hasClass('open') && container.has(e.target).length === 0){
		// $(".contact-popup").hide();
		// container.hide();
		$(".contact-popup").toggleClass('open');
	}
});

//Весь JS код

$(document).ready(function(){
	// var checkbox = $('#checkbox');
	$('#checkbox').click(function() {
		$(this).toggleClass("checked");
	});
});

//popup form open
$(document).ready(function(){
	var popBtn = $("#contact-popup-btn");
	popBtn.click(function(){
		$('.contact-popup').toggleClass('open');
	});
})

//popup form close
$(document).ready(function(){
	var closeBtn = $("#contact-popup-close");
	closeBtn.click(function(){
		$('.contact-popup').toggleClass('open');
	});
})



var popup = $('.contact-popup__block');

$(document).click(function(e){
	var popBtn = $("#contact-popup-btn");
	if ( !popBtn.is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0 ) {
		popup.toggleClass('open');
	}
});

// document.addEventListener('click', function(e) {
// 	// console.log(e.target);
// 	// var target = e.target;
// 	var its_popup = Boolean(e.target == popup || popup.has(e.target));
// 	var popup_is_open = $('.contact-popup').hasClass('open');
// 	console.log(its_popup);
// 	console.log(popup_is_open);

// 	if (!its_popup && popup_is_open) {
// 		$('.contact-popup').toggleClass('open');
// 	}
// });



// $(document).mouseup(function (e) {
// 	console.log(e.target);
// 	var container = $(".contact-popup__block");
// 	if (container.hasClass('open') && container.has(e.target).length === 0){
// 		// $(".contact-popup").hide();
// 		// container.hide();
// 		$(".contact-popup").toggleClass('open');
// 	}
// });


//success nofity on send
$(document).ready(function(){
	var submit = $("#contact-submit-btn");
	submit.click(function(e){
		e.preventDefault();
		$('.success-popup').toggleClass('open');
	});
});

HTML

<!-- popup form -->
<button class="header__top-contact-btn" id="contact-popup-btn">Заказать звонок</button>
				<div class="contact-popup">
					<div class="contact-popup__overlay" id="contPopupOverlay"></div>
					<div class="contact-popup__block">
						<button class="contact-popup__btn-close" id="contact-popup-close"><img src="img/svg/exit.svg" alt="x"></button>
						<p class="contact-popup__title">Оставить заявку</p>
						<p class="contact-popup__descr">После подачи заявки с вами свяжется <br>наш менеджер</p>
						<?php 
							$pos = 1;
							include "blocks/contact_form.php";
						?>
					</div>
				</div>
<!--  -->

Comments

[WbICHA]

Boolean(e.target == popup || popup.has(e.target));

А что возвращает метод has? Почему ты ожидаешь, что объект может быть false?

[Михаил]

WbICHA, has проверяет принадлежит ли target к popup элементу. Если клик был на popup или любой дочерний элемент, блок не исчезает

[WbICHA]

Михаил, ещё раз, что возвращает метод has? Что может вернуть Boolean(popup.has(...))?