Cómo capturar el evento de clic derecho en JavaScript

Cuando un usuario hace clic con el botón derecho en una página web, aparece un menú de menú contextual o un menú de clic derecho. Los desarrolladores a menudo deben tomar algunas medidas cuando un usuario realiza un clic derecho en un elemento de aplicación web. Por lo tanto, deben rastrear/capturar el clic derecho en el sitio web.

Este tutorial ilustrará el procedimiento para capturar el evento de clic derecho en JavaScript.

Cómo capturar el evento de clic derecho en JavaScript?

Utilizar el "ventana.addEventListener ()"Método aprobando el evento"Menú de contexto". Siempre que el usuario intente iniciar un menú contextual haciendo clic en el botón derecho del mouse, el evento contextMenu se activa.

Ejemplo 1: Capture el evento de clic derecho utilizando el método addEventListener () con el método alert ()

Para capturar un clic derecho en una página web, use el "ventana.addEventListener ()Método para adjuntar/agregar un controlador de eventos a un elemento. Luego, muestre el resultado que el usuario hace clic con el botón derecho en la página utilizando el "alerta()" método. Mostrará el mensaje en un cuadro de diálogo que aparecerá en la pantalla con el "DE ACUERDO" botón:

ventana.addEventListener ('contextMenu', (event) =>
alerta ('mouse-clic con el botón derecho');
);

La salida muestra un mensaje de alerta cuando hacemos clic con el botón derecho en la página y luego abre el menú contextual predeterminado:

Ejemplo 2: Capture el evento de clic derecho con el método AddEventListener () con la consola.Método log ()

Aquí, capturaremos el evento de clic derecho y emitiremos un mensaje a la consola:

ventana.addEventListener ('contextMenu', (event) =>
consola.log ('mouse-clic con el botón derecho');
);

Producción

Ejemplo 3: restringir el clic derecho para mostrar el menú predeterminado

En este ejemplo, veremos restringir el menú contextual predeterminado para abrir en el clic derecho usando el "PreventDefault ()" método:

ventana.addEventListener ('contextMenu', (event) =>
evento.prevenDefault ();
alerta ('se evita el clic con el botón derecho');
);

Como puede ver en la salida, el menú contextual predeterminado no aparece en el mouse, haga clic con el botón derecho:

Ejemplo 4: Abra el menú contextual personalizado en el mouse, haga clic con el botón derecho

Aquí, la salida muestra un menú contextual personalizado en el evento del mouse, haga clic con el botón derecho. Más específicamente, siga el enlace para crear un menú contextual personalizado:

Se trata de capturar el evento de clic derecho en JavaScript.

Conclusión

Para capturar el evento de clic derecho en JavaScript, use el "ventana.addEventListener ()"Método aprobando el evento"Menú de contexto". El evento contextMenu se activa cuando un usuario intenta iniciar un menú contextual haciendo clic en el botón derecho del mouse. En este tutorial, ilustramos el procedimiento para capturar el evento de clic derecho en JavaScript.