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

duvida no exercicio 2 clique do mouse

nao estou entendendo como encaixar o codigo para verificar qual botao do mouse é clicado.meu código é esse:

var tela = document.getElementById("tela");
            var c = tela.getContext("2d");

            c.strokeStyle = "black";
            c.strokeRect(0,0,600,400);


            var atira1 = function(evento){
                var x = evento.pageX - tela.offsetLeft ;
                var y = evento.pageY - tela.offsetTop ;

                c.fillStyle = "blue";
                c.beginPath();
                c.arc(x, y, 10, 0, 2 * Math.PI);
                c.fill();


            };

            var atira2 = function(evento){
                var x = evento.pageX - tela.offsetLeft ;
                var y = evento.pageY - tela.offsetTop ;

                c.fillStyle = "red";
                c.beginPath();
                c.arc(x, y, 10, 0, 2 * Math.PI);
                c.fill();


            };




            tela.onclick(function(evento) {
            switch (evento.which) {
            case 1:
                alert('botão esquerdo');
            break;
            case 2:
                alert('botão do meio');
            break;
            case 3:
                alert('botão direito');
            break;
            default:
            alert('seu mouse é bem estranho!');
5 respostas

agora consegui mas ele nao responde ao botao direito.

quando aperto com o direto ele só aparece propriedades

`var tela = document.getElementById("tela");
            var c = tela.getContext("2d");

            c.strokeStyle = "black";
            c.strokeRect(0,0,600,400);


            var atira = function(evento){
                var x = evento.pageX - tela.offsetLeft ;
                var y = evento.pageY - tela.offsetTop ;

                c.fillStyle = "blue";
                c.beginPath();
                c.arc(x, y, 10, 0, 2 * Math.PI);
                c.fill();


            };

            var atira2 = function(evento){
                var x = evento.pageX - tela.offsetLeft ;
                var y = evento.pageY - tela.offsetTop ;

                c.fillStyle = "red";
                c.beginPath();
                c.arc(x, y, 10, 0, 2 * Math.PI);
                c.fill();


            };




        tela.onclick = function(evento){
            switch(evento.which){
                case 1 :
                    console.log("botao esquerdo");
                    tela.onclick = atira;
                    break;
                case 2 :
                    console.log("botao do meio");
                    tela.onclick = atira2;
                    break;
                case 3 :
                    console.log("botao direito");
                default:
                    console.log("mouse estranho");
            }
        };

meu codigo esta assim e nao esta dando certo alguem me ajuda

solução!

Oi Milton,

a resposta sugerida desse exercício realmente não está mais funcionando nos browsers. Vamos arrumar lá, mas para você ir resolvendo, o lance é o seguinte...

Os browsers entendem que o onclick é apenas para cliques do botão esquerdo, mesmo. O botão direito tem um outro atributo só para ele: o oncontextmenu. Assim, não precisamos nem do switch! Veja:

// o resto do seu código...

tela.onclick = function(evento){
    console.log("botao esquerdo");
    atira(evento);
};

tela.oncontextmenu = function (evento) {
    console.log("botao direito");
    atira2(evento);
    evento.preventDefault();
};

Os cliques de botão direito, por default, abre o menu de ações da página. Por isso, adicionei a linha evento.preventDefault(); para que essa janelinha não seja aberta dentro do canvas.

Pode testar, por favor? :-)

consegui resolver desse jeito mesmo

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software