ฉันมีช่องป้อนข้อมูลที่แสดงเมนูแบบเลื่อนลงที่กำหนดเอง ฉันต้องการฟังก์ชันต่อไปนี้:
- เมื่อผู้ใช้คลิกที่ใดก็ได้นอกช่องป้อนข้อมูลเมนูควรถูกลบออก
- หากโดยเฉพาะอย่างยิ่งผู้ใช้คลิกที่ div ภายในเมนูเมนูควรถูกลบออกและการประมวลผลพิเศษควรเกิดขึ้นตามการคลิก div
นี่คือการใช้งานของฉัน:
ช่องป้อนข้อมูลมีonblur()เหตุการณ์ที่ลบเมนู (โดยการตั้งค่าระดับบนสุดinnerHTMLเป็นสตริงว่าง) เมื่อใดก็ตามที่ผู้ใช้คลิกนอกช่องป้อนข้อมูล div ภายในเมนูยังมีonclick()เหตุการณ์ที่เรียกใช้การประมวลผลพิเศษ
ปัญหาคือonclick()เหตุการณ์จะไม่เริ่มทำงานเมื่อคลิกเมนูเนื่องจากช่องป้อนข้อมูลonblur()เริ่มทำงานก่อนและลบเมนูรวมถึงonclick()s!
ฉันจะแก้ไขปัญหาโดยการแยก divs เมนูonclick()เข้าonmousedown()และonmouseup()เหตุการณ์ที่เกิดขึ้นและการตั้งธงทั่วโลกในการลงเมาส์ซึ่งจะถูกล้างบนเมาส์ขึ้นคล้ายกับสิ่งที่ได้รับการแนะนำในคำตอบนี้ เนื่องจากonmousedown()เริ่มทำงานก่อนonblur()การตั้งค่าสถานะจะถูกตั้งค่าonblur()หากมีการคลิก div เมนูใดเมนูหนึ่ง แต่จะไม่เกิดขึ้นหากอยู่ที่อื่นบนหน้าจอ หากเมนูถูกคลิกฉันจะกลับทันทีonblur()โดยไม่ต้องลบเมนูจากนั้นรอonclick()ให้ไฟเริ่มทำงานเมื่อถึงจุดนั้นฉันสามารถลบเมนูได้อย่างปลอดภัย
มีวิธีแก้ปัญหาที่หรูหรากว่านี้หรือไม่?
รหัสมีลักษณะดังนี้:
<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;
...
}