Disable .click function in DIV

Question

Disable .click function in DIV

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm making a game and I need a routine that disables the click at least until I finish the function.

The function is this below. When I click on the element and execute this function with touchstart and click I want that within div where this element is this does not allow the function of click until it finishes this function.

How can I do this?

$('#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 that I needed. I did so. But after the function ends I can not enable this element again to click. This element runs another function, below.

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

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

javascript jquery

asked by anonymous 24.07.2015 / 16:07

3 answers

1

You can use the event setAttribute as follows:

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 do nothing, just set the attribute to: 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><divid="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">

24.07.2015 / 16:36

1

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

In your specific case, at the beginning of your method you should run the following code to disable the clicks on the 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 re-enable 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");

Tailored response from link

24.07.2015 / 18:43

What is the ForceBrute logic of trial and error? Creating a set of variables in PHP

score 1 · Accepted Answer

I usually use another approach to this problem. Instead of joining both events to the jQuery event listener's use

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

then:

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

If it is not helpful to redo the code with this logic I suggest using flag . Knowing that touchstart fires first than 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 function:

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

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

clickAtivo = true;

that will stop blocking click .