jquery - Javascript disable onclick event until it's event is finished - Stack Overflow

admin管理员组

文章数量:1405392

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

So far that's all I've e 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 es here, but click event is being unset
        } );
        
    });  
<script>
$(document).ready(function(){});
</script>
<div id="btn">

</div>

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

So far that's all I've e 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 es here, but click event is being unset
        } );
        
    });  
<script>
$(document).ready(function(){});
</script>
<div id="btn">

</div>

• javascript
• jquery
• onclick
• jquery-events

Share Improve this question Follow edited Jan 13, 2021 at 17:40 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 8, 2014 at 10:08 user3325976user3325976 81911 gold badge88 silver badges1616 bronze badges 3

• What does doStuff do and can you modify it? – Anthony Grist Commented Apr 8, 2014 at 10:20
• @AnthonyGrist I would like functions to be independent from handlers – user3325976 Commented Apr 8, 2014 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 Commented Apr 8, 2014 at 10:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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

use pointerEvents.try this:

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

Using a bination of bind and unbind

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

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

本文标签： jqueryJavascript disable onclick event until it39s event is finishedStack Overflow