Question

如何在事件结束前临时禁用onclick事件？

到目前为止，我已经提出了

<script>
 function foStuff(a){
     //no modifications here to be done, just sume 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>

编辑：我已经尝试过了这种方式：但我并没有阻止vlick事件

$("#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>

Answer 1

好吧，你可以创建一个变量来告诉你的函数在它是真的时忽略它;

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

此代码未经过测试，但我认为这样可行。

Answer 2

只需引用处理程序，然后在执行操作之前将其分离，然后在最后再次附加...

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

Answer 3

使用pointerEvents。试试这个：

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

Answer 4

使用bind和unbind的组合

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

Answer 5

触发事件后将其关闭，然后在回调结束时重新附加事件。

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

或者，根据情况，event.stopImmediatePropagation()也可以用作解决方案。它将阻止触发所有随后附加的事件处理程序，并使自身不再冒起DOM树。

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

Javascript禁用onclick事件，直到事件结束

5 个答案: