मेरे पास एक इनपुट फ़ील्ड है जो एक कस्टम ड्रॉप-डाउन मेनू लाता है। मुझे निम्नलिखित कार्यक्षमता पसंद है:
- जब उपयोगकर्ता इनपुट फ़ील्ड के बाहर कहीं भी क्लिक करता है, तो मेनू को हटा दिया जाना चाहिए।
- यदि, अधिक विशेष रूप से, उपयोगकर्ता मेनू के अंदर एक div पर क्लिक करता है, तो मेनू को हटा दिया जाना चाहिए, और विशेष प्रसंस्करण होना चाहिए जिसके आधार पर div पर क्लिक किया गया था।
यहाँ मेरा कार्यान्वयन है:
इनपुट फ़ील्ड में एक onblur()घटना होती है, जो innerHTMLउपयोगकर्ता द्वारा इनपुट फ़ील्ड के बाहर क्लिक करने पर मेनू को हटा देता है (अपने माता-पिता को एक रिक्त स्ट्रिंग पर सेट करके )। मेनू के अंदर के डिव में भी ऐसी onclick()घटनाएं होती हैं जो विशेष प्रसंस्करण को निष्पादित करती हैं।
समस्या यह है कि onclick()मेनू को क्लिक करने पर ईवेंट कभी फायर नहीं करते हैं, क्योंकि इनपुट फ़ील्ड की onblur()आग पहले और मेनू को हटा देती है, जिसमें onclick()एस भी शामिल है!
मैंने मेनू divs onclick()में onmousedown()और onmouseup()घटनाओं को विभाजित करके और माउस पर एक वैश्विक ध्वज सेट करके समस्या का हल किया जो कि माउस अप पर साफ़ किया जाता है, इस उत्तर में जैसा सुझाव दिया गया था । क्योंकि onmousedown()पहले आग लग जाती है onblur(), onblur()अगर ध्वज में से एक पर क्लिक किया गया था , तो ध्वज सेट किया जाएगा, लेकिन स्क्रीन पर कहीं और नहीं था। यदि मेनू पर क्लिक किया गया था, तो मैं तुरंत 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;
...
}