detect Clikc 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>

JavaScript

const node = document.getElementById('mydiv')
node.style.width = '300px'
node.style.height = '100px'
node.style.background = 'red'


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')
  }
})