3

Eu estou fazendo um jogo e preciso de uma rotina que desabilite o clique pelo menos até terminar a função.

A função é esta abaixo. Quando eu clicar no elemento e executar essa função com touchstart e click quero que dentro da div onde está esse elemento não permita a função do click até que termine essa função.

Como posso fazer ?

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

Consegui desabilitar um elemento que eu precisava. Fiz assim. Mas depois que termina a função não consigo habilitar esse elemento de novo para clicar. Esse elemento roda outra função, mais abaixo.

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

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

3 Respostas 3

3

Você pode desabilitar eventos de mouse sobre os elementos alterando o atributo pointer-events do estilo CSS do elemento.

Em seu caso específico, no início de seu método você deve executar o código abaixo para desabilitar os clicks na div:

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

Ao final de seu método, para reativar os eventos de click na div, você executa o código a seguir:

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

Resposta adaptada de https://stackoverflow.com/a/25095924/1639385

2
  • Mas essa propriedade funciona bem em todos os browsers ? 24/07/2015 às 18:04
  • Se o browser for muito antigo ou se for IE antes da versão 11 é necessário fazer ajustes. No seu caso específico, quais browsers e versões você quer que seu jogo suporte? 24/07/2015 às 18:14
2

Eu costumo usar outra abordagem para este problema. Em vêz de juntar ambos os eventos ao event listener do jQuery uso

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

e depois:

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

Se não fôr o caso de ser útil refazeres o código com essa lógica sugiro usares uma flag. Sabendo que o touchstart dispara primeiro que o click basta colocares algo como

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

e na outra função:

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

e depois quando a função chegar ao fim (parece-me ser na linha media.play(audio);) podes colocar uma linha nova

clickAtivo = true;

que vai deixar de bloquear o click.

1

Você pode usas o evento setAttribute dessa forma:

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">

Se você simplesmente quiser que não execute nada é só setar o atributo como: document.getElementById(id).setAttribute('onclick', '');


Com 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">

7

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .