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 get the background color of a clicked division using jQuery ?

sayantanm19

Improve

Article Tags :

How to toggle background color using right click in jQuery ?

Similar Reads