तत्व को अकल्पनीय बनाएं (इसके पीछे की चीजें क्लिक करें)

Question

मेरी एक निश्चित छवि है जो एक पेज को ओवरलैप करती है जब उपयोगकर्ता टच स्क्रीन (मोबाइल) स्क्रॉल करने के कार्य में होता है।

मैं उस छवि को "अस्पष्ट" या "निष्क्रिय" या जो भी बनाना चाहता हूं, ताकि यदि कोई उपयोगकर्ता उस छवि को छूता है और डगमगाता है, तो उसके पीछे का पृष्ठ अभी भी स्क्रॉल करता है जैसे कि छवि इंटरैक्शन को "अवरुद्ध" नहीं कर रही थी।

क्या यह संभव है? अगर जरूरत पड़ी तो मैं स्क्रीन शॉट देने की कोशिश कर सकता हूं जो मेरे कहने का मतलब है।

धन्यवाद!

Answer 1

CSS सेट करना - pointer-events: noneछवि के साथ किसी भी माउस इंटरैक्शन को हटा देना चाहिए। सभी में बहुत अच्छी तरह से समर्थित लेकिन IE।

यहां मूल्यों की पूरी सूची लीpointer-events जा सकती है।

Comments

उत्तम! मैं पहले नहीं भाग पाया था pointer-events, यह वही है जिसकी मुझे तलाश थी। धन्यवाद!

— हेंबनामासवे

@ डस्टी किंडा समझ में आता है, आप माउस इंटरैक्शन को अक्षम कर रहे हैं फिर भी माउस इंटरैक्शन चाहते हैं। आपका विशिष्ट उपयोग मामला क्या है? UX परिप्रेक्ष्य से जो काउंटर सहज लगता है क्योंकि सूचक का अर्थ है कि क्लिक करने योग्य है। यदि आप एक साथ एक JSFiddle मैं एक नज़र रख सकते हैं फेंक देते हैं।

— क्रिस ब्राउन

@ChrisBrown कर्सर को बदलना थोड़ा सा जोस्ट था। यहाँ एक छोटा सा है जो मैं jsfiddle.net/cxwvdos0 के साथ आया था। एक तरह से एक बटन को निष्क्रिय करने के लिए पागल की तरह और कर्सर में बदलाव नहीं होना चाहिए। jQuery unbindऔर bindमुझे लगता है कि अगर मैं अपने अनाम कार्यों को परिवर्तित करना चाहता था तो मैंने काम किया होगा। प्रतिक्रिया के लिए धन्यवाद!

— डस्टी

Answer 2

सीएसएस पॉइंटर इवेंट्स वही है जो आप देखना चाहते हैं। अपने मामले में, सूचक घटनाओं को "कोई नहीं" पर सेट करें। एक उदाहरण के लिए इस JSField को देखें ... http://jsfiddle.net/dppJw/1/

ध्यान दें कि आइकन पर डबल क्लिक करना अभी भी कहेगा कि आप पैराग्राफ पर क्लिक करें।

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

Comments

उदाहरण के लिए धन्यवाद!

— हन्नाबेमासवे

सिंगल क्लिक *, और कोड उदाहरण (आइकन पर क्लिक) एफएफ 68.0 में मेरे लिए काम नहीं करता है।

— एंड्रयू

Answer 3

यदि आप जावास्क्रिप्ट का उपयोग करना चाहते हैं:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>