Cho phép click xuyên qua element overlay (div) bằng CSS pointer-events

Khi một elementoverlay (div che phủ) chặn sự kiện click đến element bên dưới, bạn có 2 cách giải quyết:

Cách 1: CSS pointer-events: none (Khuyên dùng)

.overlay {
  pointer-events: none;
}

Element sẽ trở nên "vô hình" đối với sự kiện chuột (click, hover, drag...), sự kiện sẽ xuyên qua đến element bên dưới. Element con của overlay vẫn có thể bật lại bằng pointer-events: auto.

Cách 2: JavaScript - Chuyển tiếp sự kiện thủ công

1. Lấy tọa độ click: event.clientX, event.clientY.
2. Ẩn overlay tạm thời: overlay.style.display = 'none'.
3. Dùng document.elementFromPoint(x, y) để tìm element thật sự tại vị trí đó.
4. Kích hoạt click trên element đó (hoặc xử lý logic).
5. Hiện lại overlay.

overlay.addEventListener('click', function(e) {
  var x = e.clientX, y = e.clientY;
  this.style.display = 'none';
  var target = document.elementFromPoint(x, y);
  this.style.display = '';
  if (target) target.click(); // hoặc xử lý tùy ý
});

So sánh

Khuyến nghị: Luôn ưu tiên pointer-events: none trừ khi cần logic phức tạp không thể làm bằng CSS.