JavaScript 上下文菜单 MouseEvent

当我们在桌面上单击鼠标右键时，会出现一个类似菜单的框，这个框称为上下文菜单。在 JavaScript 中，当用户尝试打开上下文菜单时会运行上下文菜单事件。这可以通过单击鼠标右键来完成。

本文演示了单击鼠标右键时执行的任何操作。例如，当我们单击鼠标右键时，我们想改变一个框的背景颜色。

HTML

  
    
    
    
  
 
  
  
    .context {
      border: 1px solid black;
      background: gREEN;
      width: 200px;
      padding: 10px;
      color: white;
    }
  
 
  
    
       
Click right mouse button
 
    
 
    
    
     
      // To prevent default operation of right mouse click
      document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
      });
 
      const contextMenu = document.querySelector(".context");
      contextMenu.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        contextMenu.textContent = "GeeksForGeeks";
      });
    
  

输出：以下输出将显示在浏览器中，当我们在上图中的框上单击鼠标右键时。

• 右键单击之前：
  

• 右键点击后：
  

注意：使用这个方法我们可以做很多事情，我们可以在我们的右键添加一个菜单。