js 右键弹出自定义菜单

最新推荐文章于 2025-06-17 16:35:19 发布

原创最新推荐文章于 2025-06-17 16:35:19 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

18 篇文章

订阅专栏

这篇博客分享了一个简洁的JavaScript实现右键弹出自定义菜单的方法。通过js声明和css样式定义，配合菜单调用，实现了鼠标右键点击出现跟随的自定义菜单。菜单项包括name和action，后者定义了点击后的动作。需要注意屏蔽系统默认右键菜单，并且在某些情况下，右键菜单可能不会自动关闭，有待进一步完善。

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

近期在项目中有一个右键菜单的需求，发现很多实现都比较复杂，于是自己花了一点时间稍微研究了一下，下面提供一个简洁的实现方法。
js声明部分：

//创建右键菜单
var epMenu={
    create:function(point,option){
        var menuNode=document.getElementById('epMenu');
        if(!menuNode){
            //没有菜单节点的时候创建一个
            menuNode=document.createElement("div");
            menuNode.setAttribute('class','epMenu');
            menuNode.setAttribute('id','epMenu');
        }else $(menuNode).html('');//清空里面的内容

        $(menuNode).css({left:point.left+'px',top:point.top+'px'});
        for(var x in option){
            var tempNode=document.createElement("a");
            $(tempNode).text(option[x]['name']).on('click',option[x].action);
            menuNode.appendChild(tempNode);
        }

        $("body").append(menuNode);
    },
    destory:function(){
        $(".epMenu").remove();
    }    
};

function sayhello(){
    alert("hellokity");
    epMenu.destory();
}

function hideSysMenu() {
    return false;
}

css样式定义部分：

.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅黑; font-size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

下面就是菜单的自定义调用部分了：

document.onmousedown = function(e){
        var menuNode=document.getElementById('epMenu');
        if(e.button===2){
            document.oncontextmenu = hideSysMenu;//屏蔽鼠标右键
            var evt = window.event || arguments[0];
            var rightedge = evt.clientX;
            var bottomedge = evt.clientY;
            epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);   
        }
//      epMenu.destory();
    }

简单解析一下：1、epMenu.create方法的第一个参数是菜单弹出的位置坐标（距离屏幕左上角），这里用的是鼠标点击的坐标，菜单跟随鼠标点击弹出；第二个参数是一个json格式的数据，用于自定义菜单项，name是菜单项名字，action是点击菜单项后的动作（可以是函数，ajax请求等）。
2、e.button的值：2表示点击右键，0表示点击左键，4表示点击中键（ie），各浏览器的button值不同，此处仅以ie11作为参考。
3、注意在创建自定义菜单之前一定要屏蔽系统默认的右键菜单，非常重要！！！
最后，这个简易的右键菜单功能还有点瑕疵，右键菜单弹出后，不进行菜单项点击操作，菜单不会自动关闭，后期有空再完善吧。IT水很深，慢慢游吧哈哈哈！！！