如何向网页添加自定义右键单击菜单？

浏览器中的右键单击菜单或上下文菜单是在右键单击鼠标操作时出现的具有多个选项的菜单。它提供了与该特定上下文相关的多种功能。有时，我们希望上下文菜单具有更多选项或功能，但我们无法修改默认上下文菜单。所以，我们必须创建一个自定义菜单。将自定义上下文菜单添加到您的网站或网页，使其看起来更加个性化并与上下文相关，并让您可以自由地向其添加所需的功能。

在本文中，我们将为网页创建自定义上下文菜单。它主要包括两个步骤。

• 防止在单击鼠标右键时弹出默认上下文菜单。
• 使用 HTML 和 CSS 创建我们自己的自定义上下文菜单并在右键单击时显示它。

让我们一步一步地了解它们。

HTML 代码：以下 HTML 代码片段仅显示具有在右键单击事件中显示的默认菜单的 HTML 页面。

HTML

  

    

        Welcome to GeeksforGeeks.
    
    

        Hi, We are creating a 
        custom context menu here.
    

  

如果我们在这个页面上右击，会弹出默认菜单。

JavaScript 代码用于阻止此默认菜单，然后我们将创建自定义上下文菜单。为了阻止默认菜单，我们将添加一个事件处理程序来处理网页上的右键单击事件。我们将使用oncontextmenu属性来监听右键单击事件。

我们将创建一个rightClick()函数。在此函数，我们将调用鼠标单击事件的preventDefault()方法，该方法将取消右键单击事件的默认行为。我们也可以返回“false”来取消事件。现在，右键单击鼠标按钮不会弹出默认菜单。

HTML 代码：以下 HTML 代码演示了如何防止默认的右键单击事件。

HTML

  

    
        Welcome to GeeksforGeeks.
    
    
        Hi, We are creating a 
        custom context menu here.
    
    
        document.oncontextmenu = rightClick;
  
        function rightClick(clickEvent) {
            clickEvent.preventDefault();
            // return false;
        }
    

  

默认菜单被阻止。让我们创建自己的自定义上下文菜单。我们要创建的上下文菜单将是一个 HTML 列表。我们还将添加一些 CSS 以使其看起来不错。

我们在带有 id 和 class 的“div”标签中创建一个无序列表。向列表中添加一些选项。我们将通过将“display”属性的值设置为none来隐藏它。

HTML

    

        
Element-1
        
Element-2
        
Element-3
        
Element-4
        
Element-5
        
Element-6
        
Element-7
    

我们将添加一些 JavaScript 代码以在右键单击时显示上下文菜单。我们还将修改rightClick()函数以添加在鼠标单击事件上显示和隐藏菜单的功能。

我们将为 click 事件添加一个事件处理程序并将其与hideMenu()函数绑定，这样如果用户单击页面上的任何位置并且上下文菜单已经显示，它就会隐藏。此外，我们必须将菜单放置在单击右键的位置。为此，我们将使用鼠标单击事件的两个属性pageX和pageY ，它们将为我们提供单击右键的坐标。如果鼠标按钮已经显示，我们将隐藏它的上下文菜单。

JavaScript 代码：

HTML

    document.onclick = hideMenu;
    document.oncontextmenu = rightClick;
      
    function hideMenu() {
        document.getElementById("contextMenu")
                .style.display = "none"
    }
  
    function rightClick(e) {
        e.preventDefault();
  
        if (document.getElementById("contextMenu")
                .style.display == "block")
            hideMenu();
        else{
            var menu = document.getElementById("contextMenu")
  
            menu.style.display = 'block';
            menu.style.left = e.pageX + "px";
            menu.style.top = e.pageY + "px";
        }
    }

输出：以下输出显示了右键单击时出现的自定义上下文菜单。

右键单击，菜单出现，但这不是我们想要的。我们希望它出现在按钮被点击的地方，它实际上应该看起来像一个菜单。

CSS 代码：我们将为菜单的正确定位和样式添加一些 CSS 属性。

HTML

最终代码：以下是上述代码片段的组合。

HTML

  

    
        .context-menu {
            position: absolute;
            text-align: center;
            background: lightgray;
            border: 1px solid black;
        }
  
        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .context-menu ul li {
            padding-bottom: 7px;
            padding-top: 7px;
            border: 1px solid black;
        }
  
        .context-menu ul li a {
            text-decoration: none;
            color: black;
        }
  
        .context-menu ul li:hover {
            background: darkgray;
        }
    
  

  

    
        Welcome to GeeksforGeeks.
    
    
        Hi, We are creating a 
        custom context menu here.
    
  
    
        
            Element-1
            Element-2
            Element-3
            Element-4
            Element-5
            Element-6
            Element-7
        
    
  
    
        document.onclick = hideMenu;
        document.oncontextmenu = rightClick;
  
        function hideMenu() {
            document.getElementById(
                "contextMenu").style.display = "none"
        }
  
        function rightClick(e) {
            e.preventDefault();
  
            if (document.getElementById(
                "contextMenu").style.display == "block")
                hideMenu();
            else {
                var menu = document
                    .getElementById("contextMenu")
                      
                menu.style.display = 'block';
                menu.style.left = e.pageX + "px";
                menu.style.top = e.pageY + "px";
            }
        }
    

  

输出：

这是我们创建的基本上下文菜单。通过添加一些很酷的悬停效果、阴影效果、着色、边框等，您可以做更多的事情。