0

Estou tentando desabilitar aquele menu que aparece na página quando o usuário clica com o botão direito do mouse.

No Angular, eu consigo pegar o evento de click usando (click)="onRightClick($event), mas eu pego apenas o "Left Click" no $event.

Lembrando que se eu fizer HostListener('click') myClick(){ } é a mesma coisa que (click)="myClick()

Pesquisei na documentação do Angular e do @HostListener e não encontrei uma solução.

Link da documentação do @HostListener: Angular - HostListener

Esse é o código onde pego o evento do click, mas ele pega apenas o Left Click, quando é o Right Click, o código não é acionado.

@HostListener('click', ['$event'])
  onClick(event) {
    console.log(event);
  }

1 Resposta 1

2

O (click) assim como o parametro 'click' em @HostListener irão executar como addEventListner, o evento click funciona mesmo somente com o click esquerdo, se deseja fazer mais iterações com o mouse deve usar mousedown, exemplo:

@HostListener('mousedown', ['$event'])
teste(event: MouseEvent)
{
    switch (event.button) {
        case 1:
            console.log('Botão esquerdo do mouse! ');
            break;
        case 2:
            console.log('Botão direito do mouse! ');
            break;
        default:
            console.log('Outro botão de mouse (click no scroll, mouse gamer, etc)');
    }
}
7
  • Obrigado pela ajuda, o seu código funcionou, só preciso de uma forma de cancelar o evento. Seja executando a ação de novo, seja, ocultando o menu que abre ao clicar com o botão direito... enfim, se tiver algum comando para tratar esse evento, é bem vindo. Commented 21/06/2019 às 17:24
  • @EdwardRamos seria dentro do método o teste(event: MouseEvent) { event.preventDefault();?
    – Syzoth
    Commented 21/06/2019 às 18:24
  • Isso mesmo, só que quando uso event.preventDefault(); , nada acontece. Parece que esse método não funciona. Commented 21/06/2019 às 18:28
  • @EdwardRamos quer cancelar qual evento?
    – Syzoth
    Commented 21/06/2019 às 19:21
  • 1
    @EdwardRamos não imaginei que o objetivo era bloquear o menu de contexto, no caso se for isso experimente assim @HostListener('contextmenu', ['$event']) e pode experimentar também: (contextmenu)="teste($event)" e na classe aplique o preventDefault: teste(event) { event.preventDefault(); }
    – Syzoth
    Commented 24/06/2019 às 12:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .