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=
"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>
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=
"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>
Output:
toggle background
Similar Reads
How to Double click on a div element to toggle background color in jQuery ? In this article, we will see how to make a double click event on a paragraph element to toggle background color in jQuery. To toggle the background color of a div element on double-click, toggleClass() method is used. The toggleClass() method is used to toggle or change the class which attached with
1 min read
How to get the background color of a clicked division using jQuery ? In this article, we will learn how to get the background color of a clicked division using jQuery. Approach: All the divisions on the page are first selected using a common selector and a click binding is applied to trigger the color detection using the click() method. The division that is then curr
2 min read
How to change background color of paragraph on double click using jQuery ? In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c
2 min read
How to Set background Image using jQuery css() Method ? This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname
2 min read
How to change the color of an icon using jQuery ? In this article, we will see how to change the color of the icon using jQuery. To change the color of the icon, we will use a jquery method. jQuery css() method this method is used to change the styling of a particular selector. This method is also can be used for changing the color of the icon. Fir
2 min read
How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below
2 min read