Закрытие элемента по клику вне его блока на js, не jquery?
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>Document</title>
		
		<style>
			.block {
				width: 200px;
				height: 200px;
				background-color: magenta;
				display: none;
			}
			.block.open { display: block }
		</style>
	</head>
	<body>
		<button>кнопка</button>
		<div class="block">asd</div>

		<script>
			(() => {
				const block = document.querySelector('.block');
				const button = document.querySelector('button');
				
				function toggle() {
					block.classList.toggle('open');
				}
				function remove() {
					block.classList.remove('open');
				}
				
				document.addEventListener('click', e => {
					const target = e.target;
					
					target === button ? toggle() : target !== block ? remove() : false;
				});
			})();
		</script>
	</body>
</html>
банально ставишь обработчик клика на body и если никто его не перехватывает, то закрываешь элемент.
вариант сложнее. делаешь под твоим элементом большой широкий элемент на весь экран, но полностью прозрачный (можно заполнить 1 пиксельной гифкой), ставишь на нём клик событие и скрываешь оба слоя