Disable Function . click on DIV

Question

I am making a game and need a routine that disables the click at least until the function finishes.

The function is this below. When I click on the element and run this function with touchstart and click I want you inside the div where this element does not permit the function of click until this function ends.

How can I do ?

$('#boxes > .box').on("touchstart", function(){
        var cor = $(this.data('cor');
        media.play("cor-"+cor);
    }).mouseenter(function(){
        clearTimeout(time);
        var cor = $(this).data('cor');
        if(!$(this).is('.bigsize')){
            time = setTimeout(function(){
                media.play("cor-"+cor);
            }, 200);
        }
    }).on("touchstart click", function(e){
        if(!$(this).hasClass("move")){
            e.preventDefault();
            e.stopPropagation();
            $("div#escolha-e-clique").addClass("out");
            var elm = $(this);
            elm.addClass("move");
            $("div#boxes > .box, div#boxes > .box-lock").not($(this)).addClass('toenter');
            setTimeout(function(){
                media.play("scroll-01-ascend");
                setTimeout(function(){
                    elm.addClass('bigsize');
                    setTimeout(function(){
                        setTimeout(function(){
                            media.play("chime-01");
                            setTimeout(function(){
                                $("div#gift").addClass('anime');
                                var randomGift = Math.floor((Math.random() * totalGifts) + 1);
                                var gift = $('div#gift > .gifts > div:nth-child('+randomGift+')');
                                gift.addClass('active');
                                setTimeout(function(){
                                    gift.addClass('rotate');
                                    //Frase do objeto
                                    var audio = gift.data('audio');
                                    setTimeout(function(){
                                        media.play(audio);
                                    }, 1400);
                                }, 2000);

                                media.play("tada");
                            }, 500);
                        }, 250);
                    }, 500);
                }, 500);
            }, 500);
        }
    });

---

I was able to disable an element I needed. I did so. But after finishing the function I cannot enable this element again to click. This element rotates another function further down.

$("div#back-exit > .back").off('click');

$("div#back-exit > .back").on('click', function(e){
    media.stop("chime-01");
    media.stop("tada"); 
});

Answer 1

I usually use another approach to this problem. In order to join both events to use jQuery’s Event system

var clickDeviceEvent = 'ontouchstart' in window ? 'touchstart' : 'mousedown';

and then:

$('#boxes > .box').on(clickDeviceEvent, function(){

If it’s not the case that it’s useful to redo the code with this logic I suggest you use a flag. Knowing that the touchstart fires before the click just put something like

var clickAtivo = true;
$('#boxes > .box').on("touchstart", function(){
    clickAtivo = false;
    var cor = $(this.data('cor');
    // resto do código

and in the other role:

}).on("touchstart click", function(e){
    if (!clickAtivo) return;
    // etc...

and then when the function comes to an end (it seems to me to be on the line media.play(audio);) you can put a new line

clickAtivo = true;

that will stop blocking the click.

Answer 2

You can use the event setAttribute thus:

function desabilitarFunção(id){
  document.getElementById(id).setAttribute('onclick', 'desabilitado()');
}

function habilitarFunção(id){
  document.getElementById(id).setAttribute('onclick', 'habilitado()');
}

function desabilitado(){
  alert("Est\u00e1 fun\u00e7\u00e3o est\u00e1 desabilitada!!");
}

function habilitado(){
  alert("fun\u00e7\u00e3o est\u00e1 habilitada!!");
  //sua função habilitada
}

.botao{
  width: 90px;
  height: 26px;

  border: 3px rgb(89,89,89) double;

  background: rgb(239, 155, 155);

  color: rgb(25,25,25);
  font-size: 20px;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;

  line-height: 1.3em;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

}

<div id="div1" class="botao" onclick="habilitado();">click-me</div>

<br/><br/>

<input type="button" onclick="desabilitarFunção('div1')" value="Desabilitar Função da DIV">
<input type="button" onclick="habilitarFunção('div1')" value="Habilitar Função da DIV">

If you simply want to not perform anything just set the attribute as: document.getElementById(id).setAttribute('onclick', '');

---

With JQuery:

function desabilitarFunção(id){
  $("#"+id).removeAttr('onclick', 'habilitado()');
  $("#"+id).attr('onclick', 'desabilitado()');
}

function habilitarFunção(id){
  $("#"+id).removeAttr('onclick', 'desabilitado()');
  $("#"+id).attr('onclick', 'habilitado()');
}

function desabilitado(){
  alert("Est\u00e1 fun\u00e7\u00e3o est\u00e1 desabilitada!!");
}

function habilitado(){
  alert("fun\u00e7\u00e3o est\u00e1 habilitada!!");
  //sua função habilitada
}

.botao{
      width: 90px;
      height: 26px;

      border: 3px rgb(89,89,89) double;

      background: rgb(239, 155, 155);

      color: rgb(25,25,25);
      font-size: 20px;
      font-weight: inherit;
      font-family: inherit;
      font-style: inherit;
      text-decoration: inherit;
      text-align: center;

      line-height: 1.3em;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="div1" class="botao" onclick="habilitado();">click-me</div>

<br/><br/>

<input type="button" onclick="desabilitarFunção('div1')" value="Desabilitar Função da DIV">
<input type="button" onclick="habilitarFunção('div1')" value="Habilitar Função da DIV">

Answer 3

You can disable mouse events on the elements by changing the attribute pointer-events of the element’s CSS style.

In your specific case, at the beginning of your method you should run the code below to disable clicks on div:

// Desabilita todos os eventos de mouse/click na div.
$("div#back-exit > .back").css("pointer-events", "none");

At the end of your method, to reactivate the click events in the div, you execute the following code:

// Habilita novamente os eventos de click/mouse na div.
$("#button_id").css("pointer-events", "auto");

Response adapted from https://stackoverflow.com/a/25095924/1639385