JavaScript實現自定義右鍵菜單

JavaScript實現自定義右鍵菜單，思路如下：

1. 屏蔽默認右鍵事件；

2. 隱藏自定義的菜單模塊（如div、ul等）；

3. 右鍵點擊特定或非特定區域，顯示菜單模塊；

4. 再次點擊，隱藏菜單。

 

明確了思路，下面給出相關代碼：

HTML：

<!--Right Click Menu-->  
<div id="background">Click Here</div>
<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("background").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.onclick=function(){  
        forRight.style.display = "none";  
    };  
};  

 

CSS:

#background {
    background-color: #4db3a2;
    width: 500px;
    height: 300px;
}
.right-menu {
    position: absolute;
    z-index: 99999;
    overflow: hidden;
    width: 150px;
    background-color: #FFFFFF;
    border: dimgray 1px solid !important;
    font-size: 14px;
    list-style-type: none;
    display: none;
}