简单源生JS实现自定义右键菜单效果

最新推荐文章于 2024-10-08 16:36:15 发布

NINE-NINE

最新推荐文章于 2024-10-08 16:36:15 发布

阅读量7k

点赞数 2

分类专栏： javascript 前端小实例文章标签： html javascript

本文链接：https://blog.csdn.net/m0_38099607/article/details/72453979

版权

前端小实例同时被 2 个专栏收录

18 篇文章 4 订阅

订阅专栏

javascript

17 篇文章 1 订阅

订阅专栏

在写项目有时候我们需要自定义右键菜单，今天分享一下这个小例子；
HTML代码：

<div id="menu">
    <ul>
        <li>帮助</li>
        <li>设置</li>
        <li>复制</li>
        <li>粘贴</li>
        <li>剪切</li>
    </ul>
</div>

CSS代码：

*{ margin: 0; padding: 0; }
#menu{
    width: 80px;
    background: #CCC;
    position: absolute;
    display: none;
}
#menu ul{
    width: 100%;
    list-style: none;
    border: 2px solid #666;
    border-bottom: 0px;
}
#menu ul li{
    height: 30px;
    font-size: 16px;
    color: #333;
    line-height: 30px;
    text-align: center;
    border-bottom: 2px solid #666;
}

JS代码：

window.onload=function(){
    var menu=document.getElementById("menu");

    document.oncontextmenu=function(ev){
        var ev=ev||event;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        menu.style.display="block";
        menu.style.left=ev.clientX+"px";
        //当滑动滚动条时也能准确获取菜单位置
        menu.style.top=ev.clientY+scrollTop+"px";
        //阻止默认事件
        return false;
    }

}