Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Criei uma função que limpa tudo na tela quando clica com botão direito do mouse, funcionou mas gerou dúvida XD

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Nosso primeiro jogo e atividade Desenhe obras de arte

por guilherme
| 21.1k xp | 23 posts

Hey people!

Criei uma função que é chamada ao clicar na tela com o botão direito do mouse, então desenha o fundo da tela e a paleta de cores por cima de tudo que estava rabiscado, dando a sensação de que apagou tudo e deixou a tela prontinha para rabiscar novamente.

Essa função limpaTudo, como disse, foi associada ao evento de click oncontextmenu. Quando criei essa função, fiz tanto ela sem parâmetro, quanto usando o parâmetro 'evento' igual as demais funções associadas a um evento, porém, das duas maneiras funcionou certinho. Queria entender pq elas não apresentam diferenças no comportamento.

Alguem ajuda ai? hehe

Abaixo, o código com o parâmetro:

    function limpaTudo(evento) {

        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
        desenhaPaletaDeCores();

        return false;
    }

Abaixo, ele sem o parâmetro:

    function limpaTudo() {

        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
        desenhaPaletaDeCores();

        return false;
    }

A chamada está sendo feita assim:

tela.oncontextmenu = limpaTudo;

Tanto com parâmetro 'evento", quanto sem, funciona... Alguém pode me ajudar a entender?

Desde já, agradeço imensamente a qualquer ser humano que quiser me dar um help =D

2 respostas
solução!
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Guilherme

O parâmetro de evento é opcional, não irá alterar nada na sua lógica, já que o evento oncontextmenu espera como retorno true ou false para exibir ou não o menu.

Agora se você quer utilizar alguma funcionalidade ou propriedade relacionada ao evento do elemento que clicou você precisa declarar o parâmetro, por exemplo:

function limpaTudo(evento) {
    console.log(evento.target);
    return false;
  }

Assim você pode saber qual elemento do HTML foi clicado.

Outro exemplo:

<meta charset="UTF-8" />

<div style="background-color: blue" onclick="qualCliquei(event)">div 1</div>
<div style="background-color: red" onclick="qualCliquei(event)">div 2</div>
<script>

  // repare que o parâmetro pode ter qualquer nome, mas no html precisa ser a palavra event
  function qualCliquei(e) { 
    alert('cliquei na ' + e.target.innerHTML);
  }
</script>

Aqui você tem uma única função que é genérica com a lógica que saberá qual elemento foi clicado porque você está recebendo a informação do evento do click já que declarou o parâmetro.

O exemplo é simples mas você pode fazer muita coisa, como por exemplo criar um menu accordion que abre o que você clicou e fecha os outros.

por guilherme
| 21.1k xp | 23 posts

Hey Guilherme,

Agora ficou bem claro. Na aula, pensei que havia entendido perfeitamente, mas quando fui testar um código, percebi que essa parte havia ficado meio bagunçada aqui na minha cabeça.

Muito obrigado mesmooo por me ajudar =D