Tôi có một trường nhập liệu hiển thị menu thả xuống tùy chỉnh. Tôi muốn các chức năng sau:
- Khi người dùng nhấp vào bất kỳ đâu bên ngoài trường nhập, menu sẽ được xóa.
- Cụ thể hơn, nếu người dùng nhấp vào một div bên trong menu, menu sẽ bị xóa và quá trình xử lý đặc biệt sẽ xảy ra dựa trên div đã được nhấp.
Đây là cách triển khai của tôi:
Trường đầu vào có một onblur()sự kiện xóa menu (bằng cách đặt giá trị gốc của nó innerHTMLthành một chuỗi trống) bất cứ khi nào người dùng nhấp vào bên ngoài trường nhập. Các div bên trong menu cũng có onclick()các sự kiện thực hiện xử lý đặc biệt.
Vấn đề là các onclick()sự kiện không bao giờ kích hoạt khi nhấp vào menu, vì trường đầu vào onblur()kích hoạt trước và xóa menu, bao gồm cả onclick()s!
Tôi đã giải quyết vấn đề bằng cách tách menu divs ' onclick()thành onmousedown()và onmouseup()các sự kiện và đặt cờ toàn cục khi di chuột xuống, cờ này được xóa khi di chuột lên, tương tự như những gì được đề xuất trong câu trả lời này . Bởi vì onmousedown()kích hoạt trước đó onblur(), cờ sẽ được đặt onblur()nếu một trong các div trình đơn được nhấp vào, nhưng không phải nếu ở một nơi khác trên màn hình. Nếu menu được nhấp vào, tôi ngay lập tức quay lại từ đó onblur()mà không xóa menu, sau đó chờ onclick()kích hoạt, lúc đó tôi có thể xóa menu một cách an toàn.
Có một giải pháp thanh lịch hơn?
Mã trông giống như sau:
<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />
var mouseflag;
function setFlag() {
mouseflag = true;
}
function removeMenu() {
if (!mouseflag) {
document.getElementById('menu').innerHTML = '';
}
}
function doProcessing(id, name) {
mouseflag = false;
...
}