2
respostas

Menu padrão.

Bom dia, fiz o código conforme instrução, mas o click com o botão direito não deixa de exibir o menu padrão do navegador. O que está errado ou o que pode está acontecendo???

Versão do Chrome: Versão 91.0.4472.77 (Versão oficial) 64 bits.

Segue código:

2 respostas

Oi Diane, tudo bem?

Rodei o seu código aqui e o que pode estar acontecendo é que você está com o "inspecionar elemento" aberto. Veja a imagem abaixo: Captura-de-Tela-2021-06-08-a-s-10-56-16

Quando estamos com ele aberto o botão direito realmente abre o menu, agora tente fechar a aba de inspecionar elemento:

Captura-de-Tela-2021-06-08-a-s-10-56-27

Veja se funciona agora! No meu funcionou aqui, agora o botão direito realmente altera a cor da bolinha:

Captura-de-Tela-2021-06-08-a-s-10-57-15

Espero ter ajudado, qualquer outra dúvida estou à disposição! Abraços e bons estudos!

Olá, Diane! Em complemento a resposta da Giovanna. Se caso ainda assim não funcionar. Aí pode ser por causa do código abaixo estar assim, que é a forma errada:

return = false;

A Forma correta é assim, sem o sinal de igual:

return false;

Repare que a forma errada tem um sinal de igual entre o return e false, que fica localizado fora da condição if dentro da função mudaCor(); Pois o correto é que precisa ficar sem esse sinal de igual. Eu tive o mesmo problema e era isso no meu caso. Aí resolveu o problema de ficar aparecendo o menu padrão do navegador. É para isso que serve o return false;, evitar o menu padrão do navegador aparecer. Vou deixar logo abaixo também o código completo para você comparar com o seu caso precise.:

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var cores = ['blue', 'red', 'green'];
    console.log(cores);
    var indiceCorAtual = 0; // começa com blue

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        console.log(pincel.fillStyle);
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        indiceCorAtual++;
        console.log(indiceCorAtual);

        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a primeira cor, azul
        }

        return false; // 01) para não exibir o menu padrão do canvas
    }

    tela.oncontextmenu = mudaCor; // 02) 






    /* IMPORTANTE

    01) return false; => evita  o menu contextual padrão do canvas ser exibido (trata-se de um menu branco com opções)
    02) .oncontextmenu => associa a execução de uma função ao clique do botão direito do mouse.

    */

</script>