En este artículo, aprenderemos a alternar el color de fondo haciendo clic con el botón derecho en jQuery.
Enfoque 1: El enfoque es mediante el uso del evento contextmenu . El método contextmenu() se usa para vincular el evento contextmenu al elemento que se está usando. Esto se puede usar para realizar la acción de cambio de color en el elemento que se está usando. Devolvemos false desde la función de vinculación para evitar que se abra el menú contextual.
Los dos colores de fondo se pueden definir en dos clases de las que se puede realizar un seguimiento mediante una variable booleana. Esta variable se alterna cuando se detecta el clic. Los métodos addClass() y removeClass() se utilizan en el elemento para agregar o eliminar la clase de acuerdo con este elemento.
Código jQuery:
let isRedBackground = true;
let box = $(".box");
box.contextmenu(function () {
// Add and remove the background classes
if (isRedBackground) {
box.removeClass("redbg");
box.addClass("greenbg");
}
else {
box.removeClass("greenbg");
box.addClass("redbg");
}
// Toggle the background color variable
isRedBackground = !isRedBackground;
return false;
});
Ejemplo: El siguiente ejemplo ilustra el enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<style>
.redbg {
background-color: red;
}
.greenbg {
background-color: green;
}
.box {
height: 250px;
width: 250px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to toggle background color
using right click in jQuery?
</b>
<p>
Right click on the div to toggle
the color of the division
</p>
<div class="box redbg"></div>
<br>
<script>
// Variable for storing the current
// background color
let isRedBackground = true;
// Get the div that has to be
// toggled
let box = $(".box");
box.contextmenu(function () {
// Add and remove class depending
// on the variable
if (isRedBackground) {
box.removeClass("redbg");
box.addClass("greenbg");
}
else {
box.removeClass("greenbg");
box.addClass("redbg");
}
// Toggle the background color variable
isRedBackground = !isRedBackground;
return false;
});
</script>
</body>
</html>
Producción:
Enfoque 2: el segundo enfoque es usar el evento mousedown() para obtener el clic derecho. El método mousedown() se utiliza para vincular el evento mousedown al elemento que se está utilizando. Esto se puede usar para obtener el clic derecho del mouse al verificar qué propiedad del evento es igual a «3», lo que denota el clic derecho.
En lugar de definir los colores de fondo en las clases, los dos colores de fondo se pueden definir como dos variables y el método css() se puede usar para establecer el color de fondo de la división. Se puede usar una variable booleana separada para rastrear el color de fondo actual y establecer el color de la división automáticamente, de manera similar al enfoque anterior.
Código jQuery:
let isBackgroundOne = true;
let backgroundOne = "red";
let backgroundTwo = "blue";
let box = $(".box");
// Bind the mousedown event
box.mousedown(function (event) {
// Disable the context menu
box.contextmenu(false);
// Check if right mouse button
if (event.which == 3) {
// Toggle the color based on the
// variable
if (isBackgroundOne) {
box.css({
backgroundColor: backgroundTwo
);
}
else {
box.css({
backgroundColor: backgroundOne
});
}
// Toggle the variable itself
isBackgroundOne = !isBackgroundOne;
}
});
Ejemplo: El siguiente ejemplo ilustra el enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<style>
.box {
height: 250px;
width: 250px;
/* Initial background color */
background-color: red;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to toggle background color
using right click in jQuery?
</b>
<p>
Right click on the div to
toggle the color of the division
</p>
<div class="box"></div>
<br>
<script>
// Variable for storing the current
// background color
let isBackgroundOne = true;
// Defining both the background colors
let backgroundOne = "red";
let backgroundTwo = "blue";
let box = $(".box");
// Bind the mousedown event
box.mousedown(function (event) {
// Disable the context menu
box.contextmenu(false);
// Check if the right mouse button
// is pressed
if (event.which == 3) {
// Toggle the color based on the
// variable
if (isBackgroundOne) {
box.css({
backgroundColor: backgroundTwo
});
}
else {
box.css({
backgroundColor: backgroundOne
});
}
// Toggle the variable itself
isBackgroundOne = !isBackgroundOne;
}
});
</script>
</body>
</html>
Producción:
alternar fondo
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA