CODEWITHSUNDEEP
javascriptjqueryonclickjquery-events
user3325976
user3325976

Reputation: 819

Javascript disable onclick event until it's event is finished

How can I temporary disable onclick event until the event is finished?

So far that's all I've come up with:

<script>
 function foStuff(a){
     //no modifications here to be done, just some code going on
 }

 $(document).ready(function(){
    $("#btn").click(function(){
        var obj = $(this);
        var action = obj.prop('onclick');
        obj.prop('onclick','');
        whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
          obj.prop('onclick',action);
        });
    });
 });
</script>
<div id="btn" onclick="doStuff(500)">

</div>

EDIT: I've tried it this way: but it doesn't unblock the click event

$("#btn").click(function(){
        var obj = $(this);
        obj.off('click');        
        $.when( doStuff(500) ).then( function(){
            obj.on('click');    //   it actually comes here, but click event is being unset
        } );
        
    });  
<script>
$(document).ready(function(){});
</script>
<div id="btn">

</div>

Upvotes: 5

Views: 4459

Answers (5)

Marc Wiest
Marc Wiest

Reputation: 359

Turn the event off once it is triggered and reattach it at the end of the callback.

jQuery( '#selector' ).on( 'click', function voodoo( event ) {
    jQuery( event.target ).off( event.type );
    // Do voodoo...
    jQuery( event.target ).on( event.type, voodoo );
});

Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.

jQuery( '#selector' ).on( 'click', function( event ) {
    event.stopImmediatePropagation();
});

Upvotes: 0

Sanchez89
Sanchez89

Reputation: 74

Using a combination of bind and unbind

https://api.jquery.com/bind/ https://api.jquery.com/unbind/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

use pointerEvents.try this:

  $("#btn").click(function(){
    document.getElementById('btn').style.pointerEvents = 'none';
    whenDoStuffFinishes.(function(){
       document.getElementById('id').style.pointerEvents = 'auto'; 
    });
});

Upvotes: 0

kenicky
kenicky

Reputation: 441

Well, you can create a variable that tells your function to ignore it while it's true;

var isIgnore = false;
$("#btn").click(function(){

      if(isIgnore)
      return;

       isIgnore = true;
        var obj = $(this);
        var action = obj.prop('onclick');
        obj.prop('onclick','');
        whenDoStuffFinishes.(function(){
          obj.prop('onclick',action);
         isIgnore = false;
        });
    });

This code is not tested but I think this will work.

Upvotes: 3

Stphane
Stphane

Reputation: 3456

Simply reference the handler, and detach it before performing your action, then at the end attach it again ...

 $(document).ready(function () {
    var handler = function () {
        var obj = $(this);
        obj.off('click');
        whenDoStuffFinishes.(function () {
            obj.click(handler);
        });
    };
    $("#btn").click(handler);
 });

Upvotes: 0

Related Questions