自定义一个浏览器右键菜单，单击右键显示

最新推荐文章于 2024-09-05 08:51:41 发布

原创最新推荐文章于 2024-09-05 08:51:41 发布 · 651 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#点击右键 #显示自定义菜单

JS 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用CSS、HTML和JavaScript来创建并实现自定义的浏览器右键菜单。通过监听鼠标右键点击事件，展示个性化的菜单选项，为用户提供更丰富的交互体验。

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

CSS

#menu{
            width: 200px;
            line-height: 30px;
            text-align: center;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0;
        }

HTML

 <div id="menu">
        <ul>
            <li><a href="#">刷新</a>&emsp;&emsp;&emsp;F5</li>
            <li><a href="#">查找</a>&emsp;&emsp;&emsp;ctrl+f</li>
            <li><a href="#">新建</a>&emsp;&emsp;&emsp;ctrl+o</li>
            <li><a href="#">剪切</a>&emsp;&emsp;&emsp;ctrl+x</li>
            <li><a href="#">复制</a>&emsp;&emsp;&emsp;ctrl+c</li>
            <li><a href="#">粘贴</a>&emsp;&emsp;&emsp;ctrl+v</li>
            <li><a href="#">属性</a>&emsp;&emsp;&emsp;ctrl+shift+r</li>
        </ul>
    </div>

<script>
        //右键注册事件
        document.oncontextmenu=function(event){
            let menu=document.querySelector("#menu");
            //点击右键显示菜单
            menu.style.display="block";
            //兼容
            var e=event || window.event;
            //鼠标距离浏览器窗口坐标
            let x=e.clientX;
            let y=e.clientY;
            //console.log(x,y);
            menu.style.left=x+"px";
            menu.style.top=y+"px";
            //隐藏默认菜单
            e.preventDefault();
        }
        //左键注册事件
        document.onclick=function(){
            let menu=document.querySelector("#menu");
            menu.style.display="none";
        }
    </script>