क्लिक आउटसाइड डिटेक्शन
किसी div को तब छुपाने के लिए जब उपयोगकर्ता उसके बाहर क्लिक करे, document पर क्लिक इवेंट लिसनर जोड़ें और चेक करें कि क्लिक टार्गेट वह div है या उसका बच्चा।
उदाहरण
e.target- वास्तविक एलिमेंट जिस पर क्लिक हुआelement.contains(otherElement)- चेक करता है कि एलिमेंट दूसरे को समाहित करता है या नहींstyle.display = 'none'- एलिमेंट को छुपाता है (लेकिन DOM में रहता है)
आधुनिक दृष्टिकोण (इवेंट डेलीगेशन)
const hideOnClickOutside = (element, callback) => {
const handleClick = (event) => {
if (!element.contains(event.target)) {
callback();
document.removeEventListener('click', handleClick);
}
};
document.addEventListener('click', handleClick);
};
// उपयोग
const dropdown = document.getElementById('myDropdown');
hideOnClickOutside(dropdown, () => dropdown.style.display = 'none');
रिएक्ट/व्यू में उपयोग
फ्रेमवर्क्स में कस्टम हुक्स/डायरेक्टिव्स का उपयोग करें:
