How to toggle background color using right click in jQuery ?
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" > w3wiki </ 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" > w3wiki </ 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: