सूचक-घटनाएँ - सीएसएस-ट्रिक्स

pointer-eventsसंपत्ति पर नियंत्रण के लिए अनुमति देता है कैसे माउस को HTML तत्वों जवाब / स्पर्श घटनाओं - CSS होवर / सक्रिय राज्यों, क्लिक / जावास्क्रिप्ट में घटनाओं नल, और चाहे या नहीं कर्सर दिखाई दे रहा है भी शामिल है।

.avoid-clicks ( pointer-events: none; )

जबकि pointer-eventsसंपत्ति ग्यारह संभव मान लेती है, लेकिन उनमें से तीन एसवीजी के साथ उपयोग के लिए आरक्षित हैं। किसी भी HTMl तत्व के लिए तीन मान्य मूल्य हैं:

none निर्दिष्ट HTML तत्व पर सभी क्लिक, स्थिति और कर्सर विकल्पों को रोकता है
autoडिफ़ॉल्ट कार्यक्षमता को पुनर्स्थापित करता है ( pointer-events: none;निर्दिष्ट के साथ एक तत्व के बाल तत्वों पर उपयोग के लिए उपयोगी)
inheritpointer-eventsतत्व के माता-पिता के मूल्य का उपयोग करेगा

इस पेन को देखें!

जैसा कि ऊपर दिखाया गया है, इसके लिए मुख्य उपयोग मामला pointer-eventsZ अक्ष पर किसी अन्य तत्व के नीचे एक तत्व को "पास से गुजरने" के लिए क्लिक या टैप करने की अनुमति देता है। उदाहरण के लिए, यह ग्राफिक ओवरले या छिपने वाले तत्वों opacity(जैसे टूलटिप्स) के लिए उपयोगी होगा और फिर भी इसके नीचे की सामग्री पर पाठ-चयन की अनुमति देगा।

ब्याज के अंक

“गैर-एसवीजी तत्वों के लिए सीएसएस में सूचक-घटनाओं का उपयोग प्रयोगात्मक है। यह फीचर CSS3 UI ड्राफ्ट विनिर्देशन का हिस्सा हुआ करता था, लेकिन कई खुले मुद्दों के कारण, इसे CSS4 के लिए स्थगित कर दिया गया है। ” - मोज़िला एमडीएन
"यदि आप किसी तत्व में एक क्लिक ईवेंट श्रोता जोड़ते हैं, तो पॉइंटर-ईवेंट शैली को हटा दें (या इसके मान को ऑटो में बदल दें, क्लिक इवेंट निर्दिष्ट कार्यक्षमता को आग लगा देगा। मूल रूप से, क्लिक इवेंट पॉइंटर-इवेंट मान का सम्मान करता है।" - डेविड वाल्श