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:

How to Set background Image using jQuery css() Method ?

sayantanm19

Improve

Article Tags :

How to toggle background color using right click in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?