Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Desabilitar o botão de reiniciar o jogo

Olá pessoal, na aula anterior o professor havia ensinado como desabilitar o botão para que enquanto o user estivesse digitando não fosse possível clicar em reiniciar o jogo, porém, após a aplicação do materialize, o que era um bottão agora é um link. Pergunto à vocês, como desabilitar o clique de um link? Eu até adicionei uma classe chamada disabled no botão, o que faz com que ele fique cinza enquanto um jogo está sendo executado, porém isso não impede que o usuário clique nele.

3 respostas

Para desabilitar o click de um link, a lógica é anular um comportamento default, e quando queremos fazer isso usando javascript ou jquery, usa-se o preventdefault. ex:

$("#idDoBotao").click(function(event){
        event.preventDefault();    
});

Davi, primeiramente obrigado por seu comentário, nesse caso acho que é um pouco diferente, pois no curso, definimos, no início do código, um comportamento para o botão, que seria:

$("#reiniciar").click(reiniciaJogo);

mas eu preciso que essa funcionalidade fique indisponível enquanto o usuário estiver jogando. Alguma ideia de como fazer isso?

As funções que controlam o início e o fim do jogo

function inicializaCronometro() {
    //quando o campo de texto for clicado, inicia a contagem de segundos,
    // se o tempo for zero, para a contagem e desabilita o campo e adiciona a classe DISABLED AO BOTÃO

    var segundos = tempoInicial - 1;
    $("#reiniciar").addClass("disabled");

    $("#texto").one("focus", function () {
        var id = setInterval(function () {
            if(segundos < 1){
                clearInterval(id);
                fimDeJogo();
            }
            $("#segundos").text(segundos--);
        }, 1000);
    });
}
function fimDeJogo() {
    $("#texto").attr("disabled", true);
    $("#texto").addClass("texto-desativado");
    $("#reiniciar").removeClass("disabled");
    newScore();
}

HTML:

        <a id="reiniciar" class="btn-floating btn-large waves-effect waves-light blue">
            <i class="material-icons">replay</i>
        </a>
solução!

Nesse caso eu só troquei a tag < a > do html por < button > e usei .attr e funcionou. Mas acredito que pra essa situação em específico não era necessário usar < a >