JSFiddle - React, Tailwind, and code Playground

by Jared Kobos

HTML

<div id="main" style="display: block; background-color: grey;">

<div id="one1">
<div id="one2" style="background-color: red;"><p>when click here should not hide<br><br>when click here should not hide<br>when click here should not hide<br>when click here should not hide</p></div>

</div>
<div id="one3"><p>when click here should not hide</p></div>


</div>
<p>when click here should hide</p>
<div id="xyz" style="background-color: green;"><p>when click here should hide</p></div>

<p>when click here should hide</p>

JavaScript

window.addEventListener('click', function(event){
	var box = document.getElementById('main');
	box.style.display = 'none';
});

var box = document.getElementById('main');
box.addEventListener('click', function(event) {
	event.stopPropagation();
});