En este artículo, aprenderemos cómo mostrar un mensaje cuando se activa un evento de menú contextual usando jQuery. Un menú contextual en un navegador es un menú con múltiples opciones que aparece cuando el usuario hace clic con el botón derecho.
Enfoque: usaremos el evento contextmenu para verificar si el usuario ha activado el menú contextual en la página. Esto se puede hacer de dos formas. El primero usa el método contextmenu() que escucha el evento contextmenu en el elemento en el que se usa. El segundo está usando el método on() para escuchar el evento del menú contextual . La función de controlador de eventos se puede usar para mostrar un mensaje al usuario.
Sintaxis:
$("element_selected").contextmenu(function () {
alert("Message to be displayed");
});
O
$("element_selected").on('contextmenu', function () {
alert("Message to be displayed");
});
Ejemplo: este ejemplo muestra las dos formas en que se puede mostrar un mensaje cuando se activa el evento del menú contextual.
HTML
<html>
<head>
<!-- Getting the jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
.elem1, .elem2 {
height: 50px;
border: 1px solid;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="elem1">
<p>This is element 1</p>
</div>
<div class="elem2">
<p>This is element 2</p>
</div>
<script>
// Using the contextmenu() method
// to display the message
$(".elem1").contextmenu(function () {
// Display the message
alert("Element 1 message");
});
// Using the on() method to check
// for the contextmenu event
$(".elem2").on('contextmenu', function () {
// Display the message
alert("Element 2 message");
});
</script>
</body>
</html>
Salida: Escribir clic en cualquier div.
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA