डब्ल्यू / जावास्क्रिप्ट के बाहर क्लिक पर Div या मेनू बंद करें

यदि आपने कभी भी मेनू पर क्लिक किया है जो क्लिक पर खुलता है, लेकिन जब उपयोगकर्ता मेनू क्षेत्र के बाहर क्लिक करता है तो उन्हें बंद करना चाहते हैं, यह करने के लिए यहां एक बहुत ही आसान तरीका है। मैं दस्तावेज़ के बॉडी में इवेंट श्रोता जोड़ता हूं। जब कोई इसे क्लिक करता है, तो हम ईवेंट की लक्षित आईडी की तलाश करते हैं। यदि यह बॉक्स के div की आईडी से मेल खाता है, तो कुछ भी नहीं करें। यदि ऐसा नहीं होता है, तो मेनू बंद करें।

थोड़ा आगे लेते हुए, पूरे शरीर पर एक क्लिक इवेंट श्रोता छोड़ने में अक्षम नहीं होता है जब इसका उपयोग नहीं किया जा रहा है। इस मामले में, यदि मेनू अभी तक खोला नहीं गया है, तो मेनू के बाहर एक क्लिक सुनने के लिए कोई कारण नहीं है। दिखाए जा रहे div के कॉलबैक में ईवेंट श्रोता जोड़ें। उसी नस में, जब div को फिर से छुपाया जा रहा है, तो ईवेंट श्रोता को हटा दें।

 दिखाएँ डिव ब्लैक बॉक्स के अंदर क्लिक करें, कुछ भी नहीं होता है। बाहर क्लिक करें, यह $ ('# showbox') गायब हो जाता है। (Function () {$ ('# bigbox') पर क्लिक करें। (Function () {document.body.addEventListener ('क्लिक करें', बॉक्सक्लोजर, झूठा);}) ;}); फ़ंक्शन बॉक्सक्लोजर (ई) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('क्लिक करें', बॉक्सक्लोजर, झूठा); $ ( '# Bigbox') को छिपाने ()।; }} 

कामकाजी उदाहरण देखें

यह भी सुनिश्चित करें कि आप jQuery को शामिल करते हैं क्योंकि उपरोक्त कुछ कार्यक्षमता लाइब्रेरी का उपयोग करती है।

यह भी देखना