एक श्रोता को कैसे अनबाइंड करें जो कॉल कर रहा है event.preventDefault () (jQuery का उपयोग करके)?


128

डिफ़ॉल्ट रूप से टॉगल कॉल्स निवारण () को रोकें, ताकि डिफॉल्ट काम न करें। आप एक चेकबॉक्स पर क्लिक नहीं कर सकते, आप एक लिंक आदि पर क्लिक नहीं कर सकते

क्या डिफ़ॉल्ट हैंडलर को पुनर्स्थापित करना संभव है?


क्या आप कुछ उदाहरण कोड दे सकते हैं?
जोजो

4
शीर्षक में प्रश्न एक शानदार है! बहुत बुरा वास्तविक सवाल यह नहीं है ... मैं यहाँ खोजने की उम्मीद कर रहा था, कैसे (यदि संभव हो तो) का उत्तर हम preventDefaultइसे कॉल किए जाने के बाद के प्रभाव को 'परेशान' कर सकते हैं । वर्तमान में यह प्रश्न वास्तव में है 'मैं jQuery के साथ एक इवेंट श्रोता को कैसे अनबॉन्ड करता हूं?'
स्टिजन डे विट

जवाबों:


80

मेरे मामले में:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); डिफ़ॉल्ट क्रिया को पुनर्स्थापित करने के लिए एकमात्र विधि के रूप में काम किया।

जैसा कि यहाँ देखा गया है: https://stackoverflow.com/a/1673570/211514


2
यदि इस तत्व में एक और क्लिक हैंडलर है, तो आप सभी घटनाओं को न केवल रोका हैंडलर से
जोड़ दें

56

यह काफी सरल है

मान लीजिए कि आप कुछ ऐसा करते हैं

document.ontouchmove = function(e){ e.preventDefault(); }

अब इसे मूल स्थिति में वापस लाने के लिए, नीचे करें ...

document.ontouchmove = function(e){ return true; }

इस वेबसाइट से


यह समाधान $ ('# a_link') के बाद काम नहीं करता है। क्लिक करें (फ़ंक्शन (e) {e.preventDault ();}); unbind फ़ंक्शन का उपयोग करें।
डेनिस मकरस्की

2
आपके द्वारा प्रदत्त लिंक टूट गया है।
स्टैक किया

16

यह बहाल करना संभव नहीं है preventDefault()लेकिन आप जो कर सकते हैं वह इसे छलता है :)

<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
   if($(this).hasClass('prevented')){
       e.preventDefault();
       $(this).removeClass('prevented');
   }else{
       $(this).addClass('prevented');
   }
});
</script>

यदि आप एक कदम आगे जाना चाहते हैं, तो आप किसी ईवेंट को ट्रिगर करने के लिए ट्रिगर बटन का उपयोग भी कर सकते हैं।


मुझे पूरा यकीन है कि यह है - मैंने हाल ही में एक डिजाइन पर ऐसा किया है। सबसे पहले एक बटन के एक क्लिक पर मैंने टचस्क्रीन इवेंट पर e.preventDefault जोड़कर एक iphone में स्क्रॉल को रोका और फिर एनीमेशन के बाद मैं सच हो गया और यह एक आकर्षण की तरह काम किया।
foxybagga

11
function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);

जिस तरह से यह मेरे लिए काम कर रहा था वह था: $ (दस्तावेज़) .off ('टचमोव'); $ (दस्तावेज़) .on ('टचमोव', फंक्शन () {रिटर्न ट्रू;});
रगर्विला

9

कुछ मामलों में * आप शुरू में return falseइसके बजाय कर सकते हैं e.preventDefault(), फिर जब आप डिफ़ॉल्ट को पुनर्स्थापित करना चाहते हैंreturn true

* मतलब जब आप घटना बुदबुदाती है और आप e.stopPropagation()साथ में उपयोग नहीं करते हैंe.preventDefault()

इसी तरह का प्रश्न भी देखें (स्टैक ओवरफ्लो में भी)

या चेकबॉक्स के मामले में आपके पास कुछ ऐसा हो सकता है:

$(element).toggle(function(){
  $(":checkbox").attr('disabled', true);
  },
function(){
   $(":checkbox").removeAttr('disabled');
}) 

9

ऐसा करने पर आप डिफ़ॉल्ट क्रिया (यदि यह HREF अनुसरण है) को पुनर्स्थापित कर सकते हैं:

window.location = $(this).attr('href');


2
विचार सही था, लेकिन बॉक्स से बाहर कोड मेरे लिए काम नहीं करता था (जब तक कि यह सिर्फ jQuery में एक सिंटैक्स परिवर्तन नहीं है) मैंने इस्तेमाल किया: window.location = $ (यह) .attr ('href');
मोदिका

3

अगर यह एक कड़ी है तो $(this).unbind("click"); लिंक को क्लिक करने पर फिर से सक्षम करेगा और डिफ़ॉल्ट व्यवहार को बहाल किया जाएगा।

मैंने एक डेमो जेएस फिडेल बनाया है यह दिखाने के लिए कि यह कैसे काम करता है

यहाँ JS fiddle का कोड है:

HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>

जावास्क्रिप्ट:

<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
  event.preventDefault();

  $( "<div>" )
    .append( "default " + event.type + " prevented "+counter )
    .appendTo( "#log" );

    if(counter == 2)
    {
        $( "<div>" )
    .append( "now enable click" )
    .appendTo( "#log" );

    $(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
    }
    else
    {
        $( "<div>" )
    .append( "still disabled" )
    .appendTo( "#log" );
    }
    counter++;
});
});
</script>

2

इस कोड का परीक्षण करें, मुझे लगता है कि आपकी समस्या का समाधान:

event.stopPropagation();

संदर्भ


आपको हैंडलर से पहले होने वाले हैंडलर पर डिफ़ॉल्ट रूप से रोकता है पर रोकना है। यदि आप अपने दूसरे हैंडलर को बबल चरण पर पंजीकृत करते हैं, तो आप कैप्चरपेज पर कर सकते हैं।
विटिम.उस

2

नाम स्थान का उपयोग करके ऐसा करने का सबसे अच्छा तरीका है। यह एक सुरक्षित और सुरक्षित तरीका है। यहाँ .rb एक ऐसा नामस्थान है जो सुनिश्चित करता है कि उस विशेष कीडाउन पर अनबेंड फ़ंक्शन काम करता है लेकिन दूसरों पर नहीं।

$(document).bind('keydown.rb','Ctrl+r',function(e){
            e.stopImmediatePropagation();
            return false;
        });

$(document).unbind('keydown.rb');

ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

Ref2: http://jqfundamentals.com/chapter/events



1

ईवेंट इंटरफ़ेस की रोकडिफॉल्ट () विधि उपयोगकर्ता एजेंट को बताती है कि यदि घटना स्पष्ट रूप से नियंत्रित नहीं होती है, तो इसकी डिफ़ॉल्ट कार्रवाई नहीं की जानी चाहिए क्योंकि यह सामान्य रूप से होगी। यह घटना सामान्य रूप से तब तक प्रचारित होती रहती है, जब तक कि इसके किसी ईवेंट श्रोताओं ने स्टॉपप्रॉपैजिनेशन () या स्टॉप इमीडिएटप्रोपेगेशन () न कह दिया हो, दोनों में से कोई एक बार भी प्रचार को समाप्त कर देता है।

ईवेंट प्रवाह के किसी भी चरण के दौरान कॉलिंगडिफॉल्ट () को कॉल करना घटना को रद्द कर देता है, जिसका अर्थ है कि घटना के परिणामस्वरूप सामान्य रूप से कार्यान्वयन द्वारा कोई भी डिफ़ॉल्ट कार्रवाई नहीं होगी।

यदि इवेंट कैंसिल है तो आप Check.cancelable का उपयोग कर सकते हैं। एक गैर-रद्द करने वाली घटना के लिए कॉल करनाDefault () का कोई प्रभाव नहीं है।

window.onKeydown = event => {
    /*
        if the control button is pressed, the event.ctrKey 
        will be the value  [true]
    */

    if (event.ctrKey && event.keyCode == 83) {
        event.preventDefault();
        // you function in here.
    }
}

0

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

var prevdef=true;
var dosubmit=function(){
    if(prevdef==true){
        //here we can do something else first//
        prevdef=false;
        dosubmit();
    }
    else{
        $(this).submit();//which was the default action
    }
};

$('input#somebutton').click(function(){dosubmit()});

1
सामान्य टिप्पणी: जबकि कुछ कोडर if (predef == true)अधिक स्पष्ट हैं, आप बिना किसी कारण के अपने जेएस कोड में 7 अक्षर जोड़ रहे हैं। if (prevdef)बस के रूप में पठनीय है। इसके अलावा, आप एक निरर्थक गुमनाम ईवेंट हैंडलर जब जोड़ लिया है .click(dosubmit)के रूप में एक ही बात करता है .click(function(){dosubmit()})के रूप में कोई पैरामीटर पारित कर रहे हैं।
कोडिंग

0

एक बूलियन का उपयोग करें:

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

मैं दूसरों पर अनुमति देते समय कुछ 'पृष्ठों' पर स्क्रॉलिंग / ज़ूमिंग को रोकने के लिए एक प्रगतिशील वेब ऐप में इसका उपयोग करता हूं।


0

आप 2 कक्षाएं बना सकते हैं। जब आप अपनी जेएस स्क्रिप्ट को उनमें से किसी एक पर सेट करते हैं, तो जब आप अपनी स्क्रिप्ट को अक्षम करना चाहते हैं, तो आप इस फ़ॉर्म से बाइंड की गई स्क्रिप्ट के साथ कक्षा को हटा दें।

HTML:

<form class="form-create-container form-create"> </form>   

जे एस

$(document).on('submit', '.form-create', function(){ 
..... ..... ..... 
$('.form-create-container').removeClass('form-create').submit();

});


-10

मुझे यकीन नहीं है कि आप क्या मतलब है: लेकिन यहाँ एक समान (और संभवतः एक ही) समस्या के लिए एक समाधान है ...

मैं अक्सर आइटम को रोकने के लिए preventDefault () का उपयोग करता हूं। हालाँकि: यह केवल अवरोधन का एकमात्र तरीका नहीं है ... अक्सर आप केवल एक "प्रश्न" चाहते हैं कि निम्नलिखित व्यवहार पहले की तरह जारी रहे या रुक जाए। हाल के एक मामले में मैंने निम्नलिखित समाधान का उपयोग किया:

$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));

असल में, "डिफ़ॉल्ट को रोकने" का मतलब है कि अवरोधन करना और कुछ और करना: "पुष्टिकरण" को उपयोग के लिए डिज़ाइन किया गया है ... अच्छी तरह से - पुष्टि!

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.