detect Click outside div

by amrendra kumar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="mydiv">
  <h2>
    click outside this div to test
  </h2>
  Check click outside 
</div>
</body>
</html>

CSS

#mydiv {
  width: 300px;
  height: 100px;
  background: red;
}

JavaScript

const node = document.getElementById('mydiv')


let isCursorInside = false

node.addEventListener('mouseover', function() {
  isCursorInside = true
  console.log('cursor inside')
})

node.addEventListener('mouseout', function() {
	isCursorInside = false
  console.log('cursor outside')
})

document.addEventListener('click', function() {
	if(!isCursorInside) {
  	alert('Outside div click detected')
  }
})