2009-11-18 20 views
29

के साथ कार्रवाई onclick ऑनक्लिक ईवेंट कार्योंरोकें jQuery

<a href="#" onclick="alert('panic!')">Let's panic</a> 
<a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a> 

मैं onclick कार्रवाई निकाले बिना ही साथ विकलांग विशेषता लिंक पर घटना एक्टन निष्पादन को रोकने की जरूरत के साथ कुछ लिंक कर रहे हैं।

$('a[disabled]').click(function(e){ 
    e.stopPropagation(); 
    return false; 
}); 

यह कोड मेरी मदद नहीं करता है।

अद्यतन यहां तक ​​कि इस कोड काम नहीं करता

<html><head><script type='text/javascript' src='jquery-1.3.2.js'></script></head> 
<body> 
<a href='#' onclick="alert('HA-ha!')" disabled="disabled" class="disabled">TEST</a> 
<script type="text/javascript"> 
    $('a[disabled], a.disabled').click(function(e){ 
     console.log('override?'); 
     e.stopImmediatePropagation();   
      e.preventDefault(); 
     e.stopPropagation(); 
     return false;  
    }); 
</script> 
</body></html> 
+1

आपके सभी jQuery कोड को '$ (दस्तावेज़) में लपेटा जाना चाहिए। पहले (फ़ंक्शन() {... कोड यहाँ ...});' वह, आपके द्वारा 'अक्षम' टैग को हटाने के संयोजन में मार्कअप और चयनकर्ता चीजें काम करना चाहिए। – rfunduk

+0

'झूठी वापसी;' बनाम 'e.preventDefault();' बनाम 'e.stopPropagation(); 'यहां मिली चर्चा: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return -फल्से –

उत्तर

52

jQuery यह एक OOTB हल करने के लिए नहीं जा रहा है:

$(function() { 
     $('a.disabled').each(function() { 
     var $this = $(this); 
     var click = $this.attr('onclick'); 
     if (click) { 
      $this.data('click',click); 
      // add return false to prevent default action 
      $this[0].onclick = function() { return false; }; 
     } 
     }); 

     $('#restoreClick').click(function() { 
      $('a.disabled').each(function() { 
       var $this = $(this); 
       $this.removeClass('disabled'); 
       var click = $this.data('click'); 
       if (click) { 
        $this[0].onclick = click; 
       } 
      }); 
     }); 
    }); 

साथ परीक्षण किया गया। यह मदद कर सकता है, लेकिन stopPropagation, stopImmediatePropagation, preventDefault, return false कोई भी काम नहीं करेगा यदि आप उन्हें तत्व से जोड़ते हैं। आपको तत्व के क्लिक हैंडलर को ओवरराइड करने की आवश्यकता है।

हालांकि आप अपने प्रश्न में "ऑनक्लिक क्रियाओं को हटाए बिना" बताते हैं। तो अगर आप डिफ़ॉल्ट व्यवहार बिंदु पर घटना शुरू हो रहा है, (के रूप में बस null विकलांग एंकर के लिए onclick विशेषता बाहर ing के क्लीनर दृष्टिकोण के खिलाफ) ओवरराइड करने के लिए की जरूरत है:

यहाँ मैं क्या मतलब है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Disable clicks</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <a href="#" onclick="alert('panic!')">Let's panic</a> 
    <a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a> 

    <script> 
    $('a[onclick]').each(function(){ 
    $(this).data('onclick', this.onclick); 

    this.onclick = function(event) { 
     if($(this).attr('disabled')) { // HERE 
     return false; 
     }; 

     $(this).data('onclick').call(this, event || window.event); 
    }; 
    }); 
    </script> 
</body> 
</html> 

Demo here.

दृष्टिकोण वहाँसाथ (जहां लंगर "अक्षम" है और तो घटना को रद्द रिक्तिपूर्व तर्क के साथ इनलाइन क्लिक हैंडलर (onclick) ओवरराइड करने के लिए मामले को पकड़ने के लिए है)।

लाभ यह है कि एंकर को फिर से सक्षम करने के लिए आप बस .removeAttr('disabled') पर सक्षम हैं।

+0

अच्छा साफ समाधान! क्या 'घटना || है window.event' जरूरी है क्योंकि jQuery पहले से ही ब्राउज़र को सामान्य करता है और 'event' ऑब्जेक्ट आपके कोड को कॉल करते समय साफ़ संस्करण है? –

+4

@dcneiner: हाँ, यह आवश्यक है। ध्यान दें कि हम केवल एक इनलाइन इवेंट हैंडलर ('ऑनक्लिक') में हैं जो ब्राउज़र आक्रमण करता है, * नहीं * एक हैंडलर jQuery सामान्यीकृत और आमंत्रित करता है। –

+0

बढ़िया! हल और स्पष्टीकरण के लिए धन्यवाद। वास्तव में मुझे क्या चाहिए। –

7

disabled एंकर की संपत्ति नहीं है। इसके बजाय rel='disabled' जैसे कुछ का उपयोग करें।

$('a[rel="disabled"]').click(function() { return false; }); 

अद्यतन:

आह, निश्चित रूप से। यह अभी भी alert को आग लगता है क्योंकि यह वास्तव में मार्कअप में इनलाइन है! मैंने ऐसा कभी नहीं किया और इसलिए ध्यान नहीं दिया। पहली जगह में jQuery में मार्कअप से बाहर है कि क्लिक हैंडलर ले लो और यह करने के और इसलिए आप तो बस की तरह कुछ कर सकते हैं:

$('a').click(function() { 
    if($(this).attr('rel') == 'disabled') { return; } 
    // do stuff here when not disabled 
    return false; // so your '#' href doesn't get used 
}); 
+1

+1 मैंने खराब चयनकर्ता – Matt

+0

हाँ को भी ध्यान नहीं दिया, jQuery _should_ 'एक [अक्षम = "अक्षम"]' काम करने में सक्षम हो, लेकिन आईएमओ एक बुरा विचार है। वैध मार्कअप के साथ चिपकाएं :) – rfunduk

+0

वैसे भी, मैंने अक्षम नाम की कुछ कक्षाओं का उपयोग रोकने से रोकने की कोशिश की है। यह अभी भी कुछ भी नहीं करता है। –

1

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

<div> 
    <a href="#" onclick="alert('panic!')">Let's panic</a> 
    <a href="#" onclick="alert('panic!')" class="disabled">I can't panic no more</a> 
</div> 
<div> 
    <input type="button" id="restoreClick" value="Restore" /> 
</div> 
4

समस्या यह है कि jQuery क्रम में ईवेंट जोड़ता है। अन्य घटनाओं को रोकने के लिए, जिन घटनाओं को आपको रोकने की आवश्यकता है उन्हें के बाद अपना स्टॉपिंग कोड आना चाहिए। चूंकि आपके पास अपने क्लिक में कोड है, इसलिए आपको ऑर्डर बदलना होगा। यह मैं क्या कर सकता है:

<a href='#' onclick="alert('HA-ha!')" class="disabled">TEST</a> 
<a href='#' onclick="alert('HA-ha!')">TEST</a> 
<script type="text/javascript"> 
    $('a').each(function(){ 
     // Cache event 
     var existing_event = this.onclick; 

     // Remove the event from the link 
     this.onclick = null; 

     // Add a check in for the class disabled 
     $(this).click(function(e){ 
      if($(this).hasClass('disabled')){ 
       e.stopImmediatePropagation(); 
       e.preventDefault(); 
      }     
     }); 

     // Reattach your original onclick, but now in the correct order 
     // if it was set in the first place 
     if(existing_event) $(this).click(existing_event); 
    }); 
</script> 

लाभ सिर्फ हटाने है/विकलांग वर्ग jQuery का उपयोग कर जोड़ें: $('a#whatever').addClass('disabled') या हटाने यह $('a#whatever').removeClass('disabled') और कोई अन्य सफाई/सेटअप की आवश्यकता है।

0

मुझे आजकल पर रोक लगाने के लिए एक बहुत ही सरल समाधान मिला, लेकिन यदि आपको इसकी आवश्यकता हो तो कार्रवाई को बनाए रखना।

<a href="javascript:alert('panic!')" >Let's panic</a> 
<a href="javascript:alert('panic!')" disabled="disabled">I can't panic no more</a> 

$('a').click(function(e){ 
    if($(this).attr('disabled')) e.preventDefault(); 
}); 

मैं का उपयोग करने का एक बहुत बड़ा प्रशंसक नहीं हूँ "जावास्क्रिप्ट:", लेकिन यह अब तक समस्या का आसान समाधान द्वारा किया गया।

उम्मीद है कि यह मदद करता है!

+0

'मैं जावास्क्रिप्ट: "का उपयोग करने का एक बड़ा प्रशंसक नहीं हूं, लेकिन यह समस्या का सबसे आसान समाधान था।' आप अन्य क्लाइंट साइड स्क्रिप्टिंग भाषाओं को पसंद करते हैं? – user1167442

+3

मुझे जावास्क्रिप्ट पसंद है, लेकिन मैं "जावास्क्रिप्ट:" वाक्यविन्यास के साथ जावास्क्रिप्ट इनलाइन का उपयोग नहीं करना पसंद करता हूं। "जावास्क्रिप्ट: चेतावनी ('दहशत!')" <- उदाहरण। स्मार्ट-गधे टिप्पणी की पहली आवश्यकता यह है कि यह "स्मार्ट" हो;) – MrBojangles

+0

यह वास्तव में है ... – user1167442

संबंधित मुद्दे