Cách phát hiện các nhấp chuột bên ngoài một phần tử bằng JavaScript

Học cách phát hiện các nhấp chuột bên ngoài một phần tử bằng JavaScript là một kỹ năng mạnh mẽ mà bạn có thể sử dụng trong nhiều tình huống, ví dụ:để ẩn menu hoặc cửa sổ phương thức. Trong vài phút nữa, bạn sẽ biết cách thực hiện.

JavaScript cơ bản phát hiện bên ngoài phần tử

Tạo phần tử hộp trong HTML:

<div class="box">
  If you click anywhere outside of me, I’m gone faster than you can snap your
  fingers.
</div>

Hãy tạo kiểu hộp bằng CSS và tạo ẩn lớp tiện ích phần tử:

.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;
}

Và tập lệnh phát hiện nhấp chuột JavaScript:

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

Đây là CodePen với tất cả mã.

Cách mã JavaScript hoạt động:

• Đầu tiên, chúng tôi tìm phần tử hộp có querySelector() và gán nó cho một biến có tên là box
• Sau đó, chúng tôi đính kèm addEventListener() vào tài liệu của chúng tôi và yêu cầu tài liệu lắng nghe khi nhấp chuột vào tài liệu (trên toàn bộ trang).
• Khi người dùng nhấp vào tài liệu, thì function() bắt đầu một câu lệnh điều kiện bên trong khối mã của nó { .. } :
• Nếu người dùng nhấp vào bên trong phần tử hộp (event.target.closest ), sau đó không làm gì cả (đó là return; phần).
• Nhưng nếu họ nhấp vào bên ngoài phần tử hộp, thì chúng tôi ẩn nó bằng cách sử dụng classList.add để thêm .js-is-hidden Lớp CSS (với display: none thuộc tính) mà chúng tôi đã tạo trước đó.

Bây giờ bạn biết cách phát hiện các nhấp chuột bên ngoài các phần tử!

Kết thúc

Trong hướng dẫn trong tương lai, chúng ta sẽ khám phá khả năng phát hiện nhấp chuột sâu hơn, bằng cách tập hợp một thành phần web thực tế mà bạn có thể sử dụng cho một dự án trong đời thực. Chúng tôi có thể tích hợp tính năng phát hiện nhấp chuột trên cửa sổ phương thức bật lên hoặc có thể là trình đơn trượt vào, trình đơn trượt ra?