【jQuery】简单的右键菜单

喜欢ヅ旅行 2022-10-07 09:49 184阅读 0赞

#### 1.说明 ####

在浏览器点击右键会弹出一个浏览器自带的默认菜单，不过有些场景我们需要一个自定义的菜单，这时候我们要阻止默认菜单并显示我们自己做好的菜单

#### 2.代码 ####

我们简单使用ul和li创建一个菜单  
HTML代码

CSS代码

.contextmenu { 
        display: none;
        position: absolute;
        width: 200px;
        background: #FFFFFF;
        border: black solid 1px;
        border-radius: 5px;
        overflow: hidden;
        z-index: 101;
        margin: 0;
        padding: 0;
    }
    .contextmenu li { 
        border-left: 3px solid transparent;
        list-style: none;
    }
    .contextmenu li:hover { 
        background: #c8c8c9;
        border-left: 3px solid #1976d2;
    }
    .contextmenu li span { 
        display: block;
        padding: 10px;
        text-decoration: none;
    }
    .contextmenu li span:hover { 
        color: #1976d2;
    }

JS代码  
需要用到jQuery，请自行引入

$(document).ready(function() { 
       $(document).contextmenu(function(e) { 
           var docWidth = $(document).width();
           var docHeight = $(document).height();
           var mouseX = e.pageX;
           var mouseY = e.pageY;
           var menuWidth = $(".contextmenu").width();
           var menuHeight = $(".contextmenu").height();
           var minEdgeMargin = 5;
           if (mouseX + menuWidth + minEdgeMargin >= docWidth &&
               mouseY + menuHeight + minEdgeMargin >= docHeight) { 
               menuLeft = mouseX - menuWidth - minEdgeMargin
               menuTop = mouseY - menuHeight - minEdgeMargin
           } else if (mouseX + menuWidth + minEdgeMargin >= docWidth) { 
               menuLeft = mouseX - menuWidth - minEdgeMargin
               menuTop = mouseY + minEdgeMargin
           } else if (mouseY + menuHeight + minEdgeMargin >= docHeight) { 
               menuLeft = mouseX + minEdgeMargin
               menuTop = mouseY - menuHeight - minEdgeMargin
           } else { 
               menuLeft = mouseX + minEdgeMargin
               menuTop = mouseY + minEdgeMargin
           };
           $(".contextmenu").css({ 
               "left": menuLeft + "px",
               "top": menuTop + "px"
           }).show();
           return false;
       });
       $(document).click(function() { 
           $(".contextmenu").hide();
       });
    });

完整代码

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>简单的右键菜单</title>
        <style type="text/css">
            body { 
                background-color: #F4F4F4;
            }
            .contextmenu { 
                display: none;
                position: absolute;
                width: 200px;
                background: white;
                border: black solid 1px;
                border-radius: 5px;
                overflow: hidden;
                z-index: 101;
                margin: 0;
                padding: 0;
            }
            .contextmenu li { 
                border-left: 3px solid transparent;
                list-style: none;
            }
            .contextmenu li:hover { 
                background: #c8c8c9;
                border-left: 3px solid #1976d2;
            }
            .contextmenu li span { 
                display: block;
                padding: 10px;
                text-decoration: none;
            }
            .contextmenu li span:hover { 
                color: #1976d2;
            }
        </style>
    </head>
    
    <body>
        <ul class="contextmenu">
            <li>
                <span>详情</span>
            </li>
            <li>
                <span>功能1</span>
            </li>
            <li>
                <span>功能2</span>
            </li>
            <li>
                <span>功能3</span>
            </li>
            <li>
                <span>功能4</span>
            </li>
            <li>
                <span>功能5</span>
            </li>
        </ul>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
            $(document).contextmenu(function(e) { 
                var docWidth = $(document).width();
                var docHeight = $(document).height();
                var mouseX = e.pageX;
                var mouseY = e.pageY;
                var menuWidth = $(".contextmenu").width();
                var menuHeight = $(".contextmenu").height();
                var minEdgeMargin = 5;
                if (mouseX + menuWidth + minEdgeMargin >= docWidth &&
                    mouseY + menuHeight + minEdgeMargin >= docHeight) { 
                    menuLeft = mouseX - menuWidth - minEdgeMargin
                    menuTop = mouseY - menuHeight - minEdgeMargin
                } else if (mouseX + menuWidth + minEdgeMargin >= docWidth) { 
                    menuLeft = mouseX - menuWidth - minEdgeMargin
                    menuTop = mouseY + minEdgeMargin
                } else if (mouseY + menuHeight + minEdgeMargin >= docHeight) { 
                    menuLeft = mouseX + minEdgeMargin
                    menuTop = mouseY - menuHeight - minEdgeMargin
                } else { 
                    menuLeft = mouseX + minEdgeMargin
                    menuTop = mouseY + minEdgeMargin
                };
                $(".contextmenu").css({ 
                    "left": menuLeft + "px",
                    "top": menuTop + "px"
                }).show();
                return false;
            });
            $(document).click(function() { 
                $(".contextmenu").hide();
            });
        });
    </script>
    
    </html>

#### 3.效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/b5cbc46e4a034484a8ecc68034e80286.png