सीएसएस के साथ ऑनक्लिक अक्षम करें :: संभव है?

Question

मैं सीएसएस के साथ onclick ईवेंट अक्षम करना चाहता हूं। मुमकिन?

मान लीजिए कि मैं

<div id="btnCopy" class="button" onclick="btnCopy(this);"><img src="copy.png"></div> 

है और "अक्षम" वर्ग जोड़ने

document.getElementById("btnCopy").className += " disabled"; 

मैं इस तत्व के लिए onclick घटना बंद करने के लिए चाहते हैं के द्वारा करते हैं, तो onclick="btnCopy(this);" सक्रिय नहीं होगा।

और को हटाने "अक्षम" वर्ग

document.getElementById("btnCopy").className = 
    document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, ''); 

इसे वापस सामान्य करने के लिए जाना होगा द्वारा, इसलिए onclick घटना सक्रिय हो जाएगा।

Answer 1

पैरामीटर-तत्व में disabled कक्षा है या नहीं, यह जांचने के लिए अपने btnCopy फ़ंक्शन में कुछ जावास्क्रिप्ट जोड़ें।

जावास्क्रिप्ट के व्यवहार को बदलने के लिए सीएसएस का उपयोग करना संभव नहीं है। सीएसएस एचटीएमएल तत्वों को स्टाइल करने के लिए है, जावास्क्रिप्ट घटनाओं और साइट के व्यवहार को संभालने के लिए है। सीएसएस और जावास्क्रिप्ट दो बहुत ही अलग चीजें हैं। सीएसएस के साथ एकमात्र चीज संभव है कि उपयोगकर्ता को इनपुट पर क्लिक करने से रोकें (उदाहरण के लिए बटन)। सीएसएस समाधान के साथ, आप ऑनक्लिक घटना में कोड को अक्षम नहीं कर रहे हैं। आप केवल ऑनक्लिक ईवेंट को ट्रिगर करने की उपयोगकर्ता की क्षमता को अक्षम कर रहे हैं।

हालांकि, पृष्ठ पर सामान बदलने के लिए कई तरीके हैं (और भी जावास्क्रिप्ट या अपने ब्राउज़र के लिए कुछ प्लगइन के साथ), जिससे आपके सीएसएस छद्म-तत्व के बावजूद बटन पर क्लिक करना संभव हो सकता है। यही कारण है कि इस के लिए सीएसएस का उपयोग करने की अनुशंसा नहीं की जाती है।

Answer 2

यदि आप क्लास जोड़ने और निकालने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं तो क्लिक ईवेंट को अक्षम करने के लिए इसका उपयोग क्यों न करें?

Answer 3

यह hackish है, लेकिन मैं छद्म तत्वों का उपयोग कर सुझाव है:

एक विकलांग वर्ग के साथ एक बटन पर, आप एक छद्म तत्व बटन को कवर तो यह क्लिक करने योग्य नहीं है बना सकते हैं।

लेकिन यह जावास्क्रिप्ट के बाद से आप पहले से ही जोड़ सकते हैं और वर्गों को दूर करने का उपयोग कर रहे उपयोग करने के लिए और अधिक समझ बनाने के हूँ ...

संपादित करें: बिल्कुल नहीं सुझाया गया, लेकिन यहाँ तुम जाओ:

#btnCopy {position:relative;z-index:1;} 

.disabled:before { 
    content:" "; 
    display:block; 
    position:absolute; 
    top:0;left:0;right:0;bottom:0; 
    z-index:10; 
} 

Answer 4

यदि आप कक्षा "अक्षम" को जोड़ना या निकालना चाहते हैं तो आप अपने ईवेंट हैंडलर में इस कक्षा के लिए भी जांच कर सकते हैं, और कुछ भी करने से तत्व को कक्षा अक्षम कर दी गई है।

Answer 5

<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}"> 
    <img src="copy.png"> 
</div> 

इसे जावास्क्रिप्ट के साथ किया जाना होगा। एक if(indexOf('disabled') == -1) चाल करना चाहिए।

Answer 6

सीएसएस के माध्यम से इसे पूरी तरह से करने का एक तरीका होवर पर एक अनजान अदृश्य ओवरले प्रदर्शित कर रहा है।

डेमो: http://jsfiddle.net/FNVmh/1/

Answer 7

कुछ ब्राउज़रों आप pointer-events: none सेट कर सकते हैं में, लेकिन यह है कि सभी माउस घटनाओं न सिर्फ क्लिक करता अक्षम करता है। देखें: https://developer.mozilla.org/en/CSS/pointer-events/

Answer 8

आप जावास्क्रिप्ट की इस पंक्ति को जोड़कर onclick ईवेंट को अक्षम करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

var btnCopy = document.getElementById("btnCopy"); 
btnCopy.className += " disabled"; 
btnCopy.onclick = null; 

सबसे अच्छा विकल्प jQuery का उपयोग और देखें कि क्या btnCopy 'अक्षम' वर्ग है करने के लिए शायद है।

if(!$('btnCopy').hasClass('disabled')){ 
    //Add code to copy text here 
} 

शुभकामनाएँ!

Answer 9

आप यह कर सकते हैं।

pointer-events: none; 
cursor: default; 

अधिक here

Answer 10

यह कैसे बूटस्ट्रैप यह करना है।

.btn.disabled, .btn[disabled] { 
    cursor: not-allowed; 
    opacity: 0.65; 
    filter: alpha(opacity=65); 
    box-shadow: none; 
} 

तुम बस cursor: not-allowed; रख सकते हैं और अगर आप शैलियों की रीसेट की जरूरत नहीं है तो आप उन्हें हटाने opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;