pointer-events प्रॉपर्टी तय करती है कि तत्व पॉइंटर इवेंट (क्लिक, होवर, टच) पर प्रतिक्रिया देगा या नहीं। none से तत्व "क्लिक-थ्रू" हो जाता है, auto डिफ़ॉल्ट व्यवहार है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.pointer1 { font-size: 20px; padding: 10px; pointer-events: none; }
.pointer2 { font-size: 20px; padding: 10px; pointer-events: auto; }
</style>
</head>
<body>
<h1>Pointer-events property example</h1>
<div class="pointer1"> Go to <a href="https://www.wikipedia.org">wikipedia.org</a> </div>
<div class="pointer2"> Go to <a href="https://www.google.com/">google.com</a> </div>
<h2>Hover over the above links to see pointer events</h2>
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
दूसरे लिंक पर होवर करने पर माउस पॉइंटर दिखेगा क्योंकि pointer-events: auto है।
मुख्य बिंदु
- pointer-events: none - तत्व और उसके चाइल्ड्स क्लिक/होवर नहीं पकड़ते
- pointer-events: auto - डिफ़ॉल्ट व्यवहार (क्लिक करने योग्य)
- उपयोग मामले - ओवरले, लोडिंग स्पिनर, डिसेबल स्टेट
- चाइल्ड पर असर - पैरेंट none हो तो चाइल्ड auto भी क्लिक नहीं पकड़ता
- SVG में उपयोगी - SVG पार्ट्स पर पॉइंटर नियंत्रण
