जावास्क्रिप्ट के साथ एक तत्व के बाहर क्लिक का पता कैसे लगाएं

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

तत्व पहचान के बाहर मूल JavaScript

HTML में एक बॉक्स एलिमेंट बनाएं:

<div class="box">
  If you click anywhere outside of me, I’m gone faster than you can snap your
  fingers.
</div>

आइए CSS के साथ बॉक्स को स्टाइल करें और एक छुपा तत्व उपयोगिता वर्ग बनाएं:

.box {
  margin: 1rem auto 1rem auto;
  max-width: 300px;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
}

.js-is-hidden {
  display: none;
}

और JavaScript क्लिक डिटेक्शन स्क्रिप्ट:

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

यहाँ एक कोडपेन है जिसमें सभी कोड हैं।

JavaScript कोड कैसे काम करता है:

• सबसे पहले, हम querySelector() . के साथ बॉक्स एलिमेंट ढूंढते हैं और इसे box . नामक एक वेरिएबल को असाइन करें
• फिर हम संलग्न करते हैं addEventListener() हमारे दस्तावेज़ के लिए और दस्तावेज़ पर (पूरे पृष्ठ पर) क्लिक सुनने के लिए कहें।
• जब उपयोगकर्ता दस्तावेज़ पर क्लिक करता है, तो function() अपने कोड ब्लॉक के अंदर एक सशर्त बयान शुरू करता है { .. } :
• यदि उपयोगकर्ता बॉक्स तत्व के अंदर क्लिक करता है (event.target.closest ), फिर कुछ न करें (यह return; . है भाग)।
• लेकिन अगर वे बॉक्स एलिमेंट के बाहर क्लिक करते हैं, तो हम इसे classList.add का उपयोग करके छुपाते हैं जोड़ने की विधि .js-is-hidden सीएसएस वर्ग (display: none संपत्ति) जिसे हमने पहले बनाया था।

अब आप जानते हैं कि तत्वों के बाहर क्लिक का पता कैसे लगाया जाता है!

रैप अप करना

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