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

431
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
First things that come to my mind: of course you can but isn’t it only a half baked solution? Can’t the event still trigger in between which results in even more extra variables just to be sure something doesn’t happen twice that really shouldn’t or sth like that, you know. But there’s no alternatives except browser creators and the w3 worker group changing sth. – LuckyLuke Skywalker Jun 07 '23 at 12:43
Answer to my own comment: Event Handler functions are stacked, then executed one by one from that 'stack', making them execute after another, making the above answer a good solution and making the aforementioned possibility of parallel writing etc incorrect or that happening impossible (when there's no bug of course ;) ) . – LuckyLuke Skywalker Jun 27 '23 at 13:34

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,368
5
32
47

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

81,290
25
94
125

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