Cách ẩn DIV khi click ra ngoài bằng JavaScript

Kỹ thuật event delegation

Gán sự kiện click cho document, kiểm tra target có nằm trong div cần ẩn hay không.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<style>
  #myDiv {
    padding: 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    display: inline-block;
  }
</style>
<body>
  <div id="myDiv">Click ra ngoài để ẩn div này.</div>
  <script>
    document.addEventListener('click', function(event) {
      var div = document.getElementById('myDiv');
      // Nếu click KHÔNG phải vào div và KHÔNG phải con cháu của div
      if (!div.contains(event.target)) {
        div.style.display = 'none';
      }
    });
  </script>
</body>
</html>

Giải thích quan trọng

• element.contains(target) kiểm tra target có phải là element hoặc con cháu.
• Dùng addEventListener thay vì onclick để không ghi đè handler khác.
• Nếu div chứa nút bấm, form input → click vào chúng không ẩn (vì contains trả true).

Mở rộng: Dropdown/Menu phổ biến

function setupClickOutside(element, onClose) {
  function handler(e) {
    if (!element.contains(e.target)) {
      onClose();
      document.removeEventListener('click', handler);
    }
  }
  // Đăng ký ở tick sau để tránh click mở menu bị bắt ngay
  setTimeout(() => document.addEventListener('click', handler), 0);
}

// Dùng
var dropdown = document.getElementById('dropdown');
dropdown.addEventListener('click', function(e) {
  e.stopPropagation(); // không bị ẩn ngay khi mở
  this.classList.toggle('open');
  if (this.classList.contains('open')) {
    setupClickOutside(this, () => this.classList.remove('open'));
  }
});