How to toggle background color using right click in jQuery ?
Last Updated :
18 Apr, 2021
In this article, we will learn to toggle the background color using the right-click in jQuery.
Approach 1: The approach is by using the contextmenu event. The contextmenu() method is used to bind the contextmenu event to the element being used. This can be used to perform the color toggling action on the element being used. We return false from the binding function to prevent the context menu from opening.
The two background colors can be defined in two classes that can be kept track of using a boolean variable. This variable is toggled when the click is detected. The addClass() and removeClass() methods are used on the element to add or remove the class according to this element.
jQuery Code:
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;
});
Example: The below example illustrates the above approach.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ 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 >
|
Output:
Approach 2: The second approach is using the mousedown() event to get the right-click. The mousedown() method is used to bind the mousedown event to the element being used. This can be used to get the right click of the mouse by checking the which property of the event to be equal to “3” which denotes the right click.
Instead of defining the background colors in classes, the two background colors can be defined as two variables and the css() method can be used to set the background color of the division. A separate boolean variable can be used to track the current background color and set the color of the division automatically, similar to the above approach.
jQuery code:
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;
}
});
Example: The below example illustrates the above approach.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ 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 >
|
Output:
toggle background
Share your thoughts in the comments
Please Login to comment...