Javascript disable onclick event until it's event is finished

Question

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>

@AnthonyGrist I would like functions to be independent from handlers — user3325976, Apr 08 '14 at 10:22
I can understand that, but can you not at least move the call to `doStuff()` to the jQuery event handler? Does it perform any asynchronous actions? — Anthony Grist, Apr 08 '14 at 10:25

score 3 · Answer 1 · answered Apr 08 '14 at 10:13

3

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.

answered Apr 08 '14 at 10:13

kenicky

421
4
14

This is not a good practice to handle click event via the string representation of the attribute `:(` [Relevant](http://stackoverflow.com/questions/6941483/onclick-vs-event-handler) – Stphane Apr 08 '14 at 10:19

score 0 · Answer 2 · answered Apr 08 '14 at 10:13

0

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);
 });

answered Apr 08 '14 at 10:13

Stphane

3,276
5
31
41

That's great, but how do i know whenDoStuffFinishes? Seriously, that's the main thing – user3325976 Apr 08 '14 at 10:15
what is WhenDoStuffFinishes ? – Stphane Apr 08 '14 at 10:16
Since you do not provide more code, I just can't help you more than by giving you an expemple: I assume what you want to wait for is the animation of some html ... jQuery provides a way to execute a callback function when the animation completes and this callback function should re-attach the handler on the element. You have to implement such a mechanism. – Stphane Apr 08 '14 at 10:26

score 0 · Answer 3 · answered Apr 08 '14 at 10:14

0

use pointerEvents.try this:

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

answered Apr 08 '14 at 10:14

Milind Anantwar

79,642
23
92
120

score 0 · Answer 4 · answered Apr 08 '14 at 10:14

0

Using a combination of bind and unbind

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

answered Apr 08 '14 at 10:14

Sanchez89

64
1
6

_As of jQuery 1.7, the .on() and .off() methods are preferred to attach and remove event handlers on elements._ – Stphane Apr 08 '14 at 10:15

Marc Wiest · Answer 5 · 2018-07-18T19:04:33.757

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();
});

Javascript disable onclick event until it's event is finished

5 Answers5