Detect click outside div using javascript

Question

I\'d like to detect a click inside or outside a div area. The tricky part is that the div will contain other elements and if one of the elements inside the div is clicked, i

Answer 1

Try this solution it uses pure javascript and it solves your problem. I added css just for better overview... but it is not needed.

document.getElementById('outer-div').addEventListener('click', function(){
  alert('clicked outer div...');
});

document.getElementById('inner-div').addEventListener('click', function(e){
  e.stopPropagation()
  alert('clicked inner div...');
});

#outer-div{
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}

#inner-div{
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  position: absolute;
  background: red;
}