JavaScript Clique com o botão direito do clique no menu

Um menu de contexto ou o menu do clique com o botão direito do mouse abre quando o usuário clica com o botão direito do mouse em uma página da web. Às vezes, os desenvolvedores podem precisar expandir o menu de contexto padrão, mas não conseguem fazer isso. Então, os desenvolvedores criam seus menus personalizados. Um menu de contexto personalizado oferece a opção de adicionar recursos exclusivos e ajuda o site ou a página da web a parecer mais adaptável e apropriado para o contexto.

Este estudo demonstrará o menu do clique com o botão direito e como criar um menu personalizado com o botão direito do mouse no JavaScript.

Qual é o menu padrão de clique com o botão direito em uma página da web?

Quando você clica em uma página da web com o botão direito do mouse, uma caixa aparece com várias opções de menu, ele é chamado de menu com o botão direito do mouse ou um menu de contexto padrão:

Vamos ver um exemplo de como criar um menu personalizado com o botão direito do mouse em uma página da web.

Criando um menu personalizado com o botão direito do mouse com JavaScript
Criaremos uma página da web simples com HTML e CSS e, em seguida. Vamos posicionar e estilizar nosso menu personalizado com o botão direito do mouse usando as propriedades CSS:

JavaScript Clique com o botão direito do clique no menu

Para obter um menu de contexto personalizado, clique em qualquer lugar da página

Em seguida, escreva o código para o menu personalizado do clique com o botão direito do mouse em um arquivo JavaScript. Primeiro, oculte ou bloqueie o menu de contexto padrão em uma página da web.

• Ligar para "PreventDefault ()”Método que impede que o menu padrão do clique com o botão direito do mouse de aparecer enquanto desencadeia o“menu contextualEvento.
• Chame a função definida chamada “CreateMenuonRightClick ()”Para clique com o botão direito do mouse personalizado com“e.ClientX" e "e.Cliente”Argumentos que mostram a posição do mouse:

_currentMenVisible = null;
documento.addEventListener ('contextmenu', e =>
e.prevenvDefault ();
CreateMenuonRightClick (e.ClientX, e.cliente);
);

Defina uma função “CreateMenuonRightClick ()”Que será lançado com o botão direito do mouse do usuário na página da web:

função createMenuonrightClick (x, y)
fecheopenedmenu ();
Const Menuelement = Documento.createElement ('div');
menução.Lista de classe.add ('contextmenu');
const menulistElement = documento.createElement ('ul');
const menuArray = ['atualização', 'aberto', 'salvar', 'copy', 'ajuda'];
para (var elemento de menuArray)
var listElement = documento.createElement ('li');
ListElement.inerhtml = '' + elemento + '';
MenulistElement.ApndendChild (ListElement);

menução.ApndendChild (MenulistElement);
documento.corpo.ApndendChild (menução);
_CurrentMenVisible = MenuEment;
menução.estilo.display = 'bloco';
menução.estilo.esquerda = x + "px";
menução.estilo.top = y + "px";

Vamos repassar o que está acontecendo no código mencionado acima:

• No clique direito, a primeira coisa é fechar qualquer outro clique com o botão direito ou menus de contexto atualmente abertos na página.
• Então criamos um novo “div”Que hospedará o menu personalizado do clique com o botão direito.
• Então, dentro do “div”, É adicionada uma lista não ordenada que contém uma variedade de listas que aparecem como um menu na página da web.

Para fechar o menu de contexto, clique em qualquer lugar da página da web. Isso será tratado usando o “clique”Evento que será acionado quando o usuário clicar na página da web depois de abrir o menu do clique com o botão direito do mouse. Este manipulador de eventos chama a função especificada "Closetheopenedmenu ()”:

documento.addEventListener ('clique', e =>
fecheopenedmenu ();
);

Agora, defina uma função “Closetheopenedmenu ()”Para fechar o menu do clique com o botão direito do mouse em que ligue para o“ClosContextMenu ()”Método que fechará o menu:

função fecheopenedmenu ()
if (_currentMenVisible !== null)
ClosContextMenu (_CurrentMenVisible);

O "ClosContextMenu ()”O método está definido abaixo:

Função ClosContextMenu (Menu)
cardápio.estilo.esquerda = '0px';
cardápio.estilo.top = '0px';
documento.corpo.removechild (menu);
_currentMenVisible = null;

Para estilizar um menu de contexto ou clique com o botão direito do mouse, aplique CSS a vários elementos para fazer com que pareça bom. Primeiro, adicione o estilo à etiqueta corporal para alinhar o texto no centro e definir a cor do fundo:

corpo
Alinhamento de texto: centro;
Antecedentes: #B7C4F1;

Estilize o menu definindo a cor do texto, a cor de fundo, a borda e a posição para “absoluto”:

.menu contextual
Posição: Absoluto;
Largura: 100px; Altura: Auto;
Cor: #B7C4F1;
Antecedentes: #344683;
borda: 1px Solid #344683;
Mostrar nenhum;

Estilo a lista não ordenada com itens de lista para definir o preenchimento e a margem:

.contextmenu ul
preenchimento: 0;
margem: 0;

.contextmenu ul li
fundo de borda: #b7c4f1 1px sólido;
preenchimento: 0;
margem: 0;

Defina a borda da última opção do menu usando o “fundo de fronteiraPropriedade que não será nenhuma;

.ContextMenu Ul Li: Último filho
Bottom de fronteira: Nenhum;

Estilize o menu com uma tag de âncora.

.contextmenu ul li a
Alinhamento de texto: esquerda;
exibição: bloco;
preenchimento: 5px 10px;
Cor: #B7C4F1;
TRANSFORMA DE TEXTO: capitalizar;
Decoração de texto: Nenhum;

Defina a cor de fundo dos itens da lista no Hover:

.ContextMenu ul li a: pairar
Antecedentes: #2777FF;

Como você pode ver na saída, clicando em uma página da web com o botão direito do mouse exibe um menu personalizado do clique com o botão direito do mouse:

Conclusão

Como o menu de contexto padrão não pode ser expandido para adicionar opções personalizadas, portanto, um menu de clique com o botão direito do mouse personalizado precisa ser criado para fornecer opções personalizadas ao usuário. Um menu de clique com o botão direito personalizado pode ser facilmente criado na posição atual do mouse com a ajuda do JavaScript e CSS. Nesta postagem do blog, um menu de clique com o botão direito personalizado foi criado e o procedimento é explicado passo a passo.