Cách Phát Hiện Click Bên Ngoài Phần Tử Với JavaScript

Học cách phát hiện click bên ngoài phần tử với JavaScript là kỹ năng mạnh mẽ dùng được nhiều tình huống, ví dụ ẩn menu hoặc modal window. Chưa đầy vài phút bạn sẽ biết cách.

Phát hiện click bên ngoài element cơ bản

Tạo box element trong HTML:

<div class="box"> Nếu bạn click bất kỳ đâu bên ngoài tôi, tôi biến mất nhanh hơn bạn nháy mắt. </div>

Style box với CSS và tạo hide element utility class:

.box { margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; border-radius: 4px; padding: 1rem 1.5rem; font-size: 1.5rem; } .js-is-hidden { display: none; }

Script JavaScript phát hiện click:

// Chọn element class box, gán cho biến box const box = document.querySelector(".box") // Phát hiện tất cả click trên document document.addEventListener("click", function(event) { // Nếu user click BÊN TRONG element, không làm gì if (event.target.closest(".box")) return // Nếu user click BÊN NGOÀI element, ẩn nó! box.classList.add("js-is-hidden") })

CodePen toàn bộ mã tại đây.

Cách code JavaScript hoạt động:

• Dùng querySelector() tìm box element gán cho biến box
• Gắn addEventListener() cho document lắng nghe click trên document (toàn trang).
• Khi user click document, function() khởi động câu lệnh điều kiện bên trong block code { .. }:
• Nếu user click bên trong box element (event.target.closest), không làm gì (phần return;).
• Nhưng nếu click bên ngoài box element, ẩn nó bằng classList.add thêm class CSS .js-is-hidden (có display: none) tạo trước.

Bây giờ bạn biết cách phát hiện click bên ngoài element!

Tổng kết

Trong hướng dẫn tương lai, sẽ khám phá click detection sâu hơn, xây dựng web component thực tế dùng cho dự án thật. Có thể tích hợp click detection trên popup modal, hoặc menu slide-in slide-out?