HTML / CSS: क्लिक करने के लिए एक div "अदृश्य" बनाएं?

Question

विभिन्न कारणों से, मुझे <div>कुछ पाठों पर पारदर्शी (ज्यादातर) पारदर्शी होने की आवश्यकता है। हालाँकि, इसका मतलब है कि पाठ को क्लिक नहीं किया जा सकता है (जैसे, लिंक पर क्लिक करने के लिए या इसे चुनने के लिए)। क्या केवल क्लिक और अन्य माउस ईवेंट के लिए इस div को "अदृश्य" बनाना संभव होगा?

उदाहरण के लिए, overlayडिव कवर पाठ को कवर करता है, लेकिन मैं overlayडिव के माध्यम से पाठ पर क्लिक / चयन करने में सक्षम होना चाहूंगा :

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

Comments

संक्षिप्त जवाब नहीं है। (कई बार चर्चा की जा चुकी है, लेकिन इसके लिए डुप्लिकेट मिलना मुश्किल है, अच्छे कीवर्ड के बारे में सोच भी नहीं सकते ...) इसके लिए आपको पारदर्शी जीवी की क्या आवश्यकता है?

— पकाका

मुझे नहीं लगता कि यह संभव है। हो सकता है कि आप "विभिन्न कारणों" के बारे में बताएं यानी आप वास्तव में क्या हासिल करना चाहते हैं?

— davehauser

@ नल मैं -1 को रोकूंगा जब तक यह स्पष्ट न हो जाए कि ओपी क्या करना चाहता है।

— पेक्का

NullUserException - वह किस तरह से अपनी वेबसाइट से लोगों को सामग्री की प्रतिलिपि बनाने से रोकने का प्रस्ताव दे रहा है? यदि कुछ भी हो, वह इसके विपरीत करने की कोशिश कर रहा है - वह अपने पारदर्शी डिव (पाठ को क्लिक करने और चयन करने के लिए कठिन बनाने में) के प्रभाव को कम करना चाहता है।

— हैमराइट

@ हैमर आप सही हैं। मैंने उतार को हटा दिया।

— NullUserException

Answer 1

यह CSS का उपयोग करके किया जा सकता है pointer-events। यह संपत्ति फ़ायरफ़ॉक्स 3.6+, क्रोम 2+, IE 11+ और सफारी 4+ में समर्थित है। दुर्भाग्य से, मुझे क्रॉस-ब्राउज़र वर्कअराउंड का ज्ञान नहीं है।

#overlay {
  pointer-events: none;
}

Comments

आह, यह अच्छा लग रहा है! अब, एकमात्र समस्या यह है कि मुझे कुछ बच्चों को सूचक घटनाओं को स्वीकार करने के लिए मिल गया है ... लेकिन शायद मैं यह समझ सकता हूं। धन्यवाद!

— डेविड वॉलेवर

कूल: pointer-events: visibleऐसा लगता है कि जैसा मैं चाहता हूँ वैसा ही करूँगा । धन्यवाद!

— डेविड वोलेवर

क्रोम में काम करता है! प्यार करो कि यह संभव है!

— बीटी

एक पॉइंटर इवेंट

— पॉलीफ़िल है

सबसे सरल और सबसे अधिक स्ट्रेट फॉरवर्ड उत्तर!

— जोन्स जी

Answer 2

यह ओवरले को अस्थायी रूप से छिपाने के बाद घटना को फिर से शुरू करके किया जा सकता है।

इस प्रश्न का पहला उत्तर देखें: HTML "ओवरले" जो क्लिकों को इसके पीछे के तत्वों के माध्यम से गिरने की अनुमति देता है

Answer 3

आप इस तरह से ओवरले को छिपाकर ऐसा कर सकते हैं:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

Answer 4

इस jQuery का उपयोग करें

$("div").click(function(e){e.preventDefault();});

आईडी या तत्व के साथ "div" बदलें

Answer 5

डिव पर सभी ईवेंट (या चिक) को अक्षम करने के लिए वैकल्पिक है () सभी ईवेंट जो डिफ़ॉल्ट रूप से टैग के साथ संलग्न हैं

  $('#myDivId').unbind();

या

  $('#myDivId').unbind("click");

Comments

jqueryअब के off()पक्ष में उपयोग करता है unbind(), और केवल हैंडलर्स को हटा देता है, div को क्लिक को कैप्चर करने से नहीं रोकता है।

— रातोलि