如何在 jQuery 中使用右键单击切换背景颜色？

在本文中，我们将学习在 jQuery 中使用右键单击来切换背景颜色。

方法一：方法是使用上下文菜单事件。 contextmenu()方法用于将contextmenu事件绑定到正在使用的元素。这可用于对正在使用的元素执行颜色切换操作。我们从绑定函数返回false以防止打开上下文菜单。

这两种背景颜色可以在两个类中定义，这些类可以使用布尔变量进行跟踪。当检测到点击时，这个变量被切换。在元素上使用addClass()和removeClass()方法根据此元素添加或删除类。

jQuery代码：

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;
});

示例：下面的示例说明了上述方法。

HTML

  

    
    
  
    
        .redbg {
            background-color: red;
        }
  
        .greenbg {
            background-color: green;
        }
  
        .box {
            height: 250px;
            width: 250px;
        }
    

  

    
        GeeksforGeeks
    
  
    
        How to toggle background color
        using right click in jQuery?
    
  
    
        Right click on the div to toggle
        the color of the division
    
  
    
    
  
    
      
        // 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;
        });
    

  

输出：

方法 2：第二种方法是使用mousedown() 事件以获得右键单击。鼠标按下（） 方法用于将mousedown事件绑定到正在使用的元素。这可用于通过检查哪个来获得鼠标的右键单击 事件的属性等于“3”，表示右键单击。

无需在类中定义背景颜色，可以将两种背景颜色定义为两个变量和css() 方法可用于设置分区的背景颜色。可以使用单独的布尔变量来跟踪当前背景颜色并自动设置分区的颜色，类似于上述方法。

jQuery代码：

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;
    }
});

示例：下面的示例说明了上述方法。

HTML

  

    
    
      
    
        .box {
            height: 250px;
            width: 250px;
  
            /* Initial background color */
            background-color: red;
        }
    

  

    
        GeeksforGeeks
    
  
    
        How to toggle background color
        using right click in jQuery?
    
  
    
        Right click on the div to
        toggle the color of the division
    
  
    
    
  
    
      
        // 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;
            }
        });
    

  

输出：

切换背景