Nếu bạn đã từng xử lý các menu mở khi nhấp, nhưng muốn chúng đóng khi người dùng nhấp vào bên ngoài vùng trình đơn, đây là một cách khá đơn giản để thực hiện. Tôi thêm một người nghe sự kiện vào phần thân của tài liệu. Khi ai đó nhấp vào nó, chúng tôi sẽ tìm id mục tiêu của sự kiện. Nếu nó khớp với ID của div của ô, thì không làm gì cả. Nếu không, hãy đóng menu.
Đi xa hơn một chút, sẽ không hiệu quả khi để người nghe sự kiện nhấp chuột trên toàn bộ cơ thể khi nó không được sử dụng. Trong trường hợp này, nếu menu chưa được mở, không có lý do gì để nghe một nhấp chuột bên ngoài trình đơn. Thêm trình nghe sự kiện vào trong gọi lại của div đang hiển thị. Trong cùng một tĩnh mạch đó, khi div bị ẩn lần nữa, hãy xóa trình nghe sự kiện.
Hiển thị Div Nhấp vào bên trong hộp đen, không có gì xảy ra. Nhấp vào bên ngoài, nó biến mất $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hide (); }} Xem ví dụ làm việc
Ngoài ra, hãy đảm bảo bạn bao gồm jQuery vì một số chức năng ở trên sử dụng thư viện.
