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