Cuando hacemos clic con el botón derecho del mouse en nuestro escritorio, aparece un cuadro similar a un menú y este cuadro se llama menú contextual. En JavaScript, un evento de menú contextual se ejecuta cuando un usuario intenta abrir un menú contextual. Esto se puede hacer haciendo clic en el botón derecho del ratón.
Este artículo demuestra cómo ejecutar cualquier operación cuando hacemos clic con el botón derecho del mouse. Por ejemplo, queremos cambiar el color de fondo de un cuadro cuando hacemos clic con el botón derecho del mouse.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
</head>
<!-- Adding some CSS -->
<style>
.context {
border: 1px solid black;
background: gREEN;
width: 200px;
padding: 10px;
color: white;
}
</style>
<body>
<div class="context">
<p>Click right mouse button</p>
</div>
<!-- JavaScript code to change content when
we click right mouse button -->
<script>
// To prevent default operation of right mouse click
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
const contextMenu = document.querySelector(".context");
contextMenu.addEventListener("contextmenu", (e) => {
e.preventDefault();
contextMenu.textContent = "GeeksForGeeks";
});
</script>
</body>
</html>
Salida: la siguiente salida se mostrará en el navegador y cuando hagamos clic con el botón derecho del mouse en el cuadro de la imagen de arriba.
- Antes del clic derecho:
- Después de hacer clic derecho:
Nota: Con este método podemos realizar muchas cosas, podemos agregar un menú al hacer clic con el botón derecho .
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA