jq自定义右键弹出菜单

最新推荐文章于 2020-07-12 09:35:02 发布

LLL_LH

最新推荐文章于 2020-07-12 09:35:02 发布

阅读量868

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery js 文章标签： jquery html

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/78982897

js 同时被 2 个专栏收录

78 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

本文介绍如何使用HTML、CSS及jQuery实现一个简单的自定义右键菜单，包括菜单的显示与隐藏逻辑。通过监听鼠标右键点击事件，在指定位置显示菜单，并在点击页面任意位置时隐藏菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 html部分

<div id="menu" style="display:none;">
        <ul>
            <li>关闭当前页</li>
            <li>关闭其他</li>
            <li>关闭所有</li>
            <li>刷新</li>
        </ul>
    </div>

2 css部分

#menu{width: 120px; background: #f3f3f3;border: 1px solid #D3D3D3;padding: 10px 0;z-index: 9999;position:absolute;}
#menu ul li{white-space:nowrap;cursor: pointer;font-size: 12px;height: 24px;line-height: 24px;padding: 0 10px;}
#menu ul li:hover{background: #E2E2E2;}

3 jquery部分

$("div").on('contextmenu', function (e) {//鼠标右击事件
     $('#menu').show().css({
         'top': e.pageY + 'px', //获取右键点击坐标
         'left': e.pageX + 'px' //获取右键点击坐标
     });
     e.preventDefault();//取消事件的默认动作
 });
 //点击任意地方隐藏右键菜单
 $(document).click(function () {
     $('#menu').hide();
 })

也可以用js

window.onload = function(){  
    var menu = document.getElementById("menu");  
    document.getElementById("mtree").oncontextmenu = function(event){  
        var event = event || window.event;  
        //显示菜单  
        menu.style.display = "block";  
        //菜单定位  
        menu.style.left = event.clientX+"px";  
        menu.style.top = event.clientY+"px";  
        //return false为了屏蔽默认事件  
        return false;  
    };  
    //再次点击，菜单消失  
    document.onclick=function(){  
        menu.style.display = "none";  
    };  
};