js实现自定义右键菜单

最新推荐文章于 2024-09-10 08:58:13 发布

Yetnum

最新推荐文章于 2024-09-10 08:58:13 发布

阅读量4.2k

点赞数 5

分类专栏： JavaScript 文章标签： JavaScript HTML 右键菜单

本文链接：https://blog.csdn.net/YetnumSun/article/details/55045003

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript实现自定义右键菜单，思路如下：

1. 屏蔽默认右键事件；

2. 隐藏自定义的菜单模块（如div、ul等）；

3. 右键点击特定或非特定区域，显示菜单模块；

4. 再次点击，隐藏菜单。

明确了思路，下面给出相关代码：

HTML

<!--Right Click Menu-->
<div class="right-menu" id="right-menu">
    <ul>
        <b>选择类型：</b>
    </ul>
    <div align="center">
        <a href='javascript:;' value="01">拼接视频文件</a>
        <a href='javascript:;' value="02">拼接图片文件</a>
        <a href='javascript:;' value="03">拼接字幕文件</a>
        <a href='javascript:;' value="04">流媒体文件</a>
        <a href='javascript:;' value="05">图片文件</a>
        <a href='javascript:;' value="06">字幕文件</a>
        <a href='javascript:;' value="07">动画文件</a>
        <a href='javascript:;' value="08">字体文件</a>
        <a href='javascript:;' value="09">音视频文件</a>
    </div>
</div>

JavaScript

window.onload = function(){
    var forRight = document.getElementById("right-menu");
    document.getElementById("模块1").oncontextmenu = function(event){
        var event = event || window.event;
        //显示菜单
        forRight.style.display = "block";
        //菜单定位
        forRight.style.left = event.pageX+"px";
        forRight.style.top = event.pageY+"px";
        //return false为了屏蔽默认事件
        return false;
    };
    //再次点击，菜单消失
    document.οnclick=function(){
        forRight.style.display = "none";
    };
};