Cách tạo điều kiện sự kiện click bên trong/ngoài nhiều div - JavaScript

Bạn có thể sử dụng event listener cho sự kiện click.

Ví dụ

Mã minh họa:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> 
<body> 
  <div class="divDemo"> First Division </div> 
  <div class="divDemo"> Second Division </div> 
</body> 
<script> 
  document.addEventListener('click', callEventFuncion); 
  function callEventFuncion(event) { 
    var div = document.querySelectorAll('.divDemo'); 
    var result = Array.apply(0, div).find((v) => v.contains(event.target)); 
    if (result) { 
      console.log("Click bên trong DIV"); 
    } else { 
      console.log("Click bên ngoài DIV"); 
    } 
  } 
</script> 
</html>

Để chạy chương trình, lưu file index.html và mở với Live Server trong VSCode.

Kết quả

Khi click vào div, console in "Click bên trong DIV". Click ra ngoài in "Click bên ngoài DIV".