原理：当用户点击鼠标右键的时候oncontextmenu事件被触发

js禁用鼠标右键菜单

window.oncontextmenu=function(e){
    e.preventDefault();
}

自定义鼠标右键菜单

html

<div id="menu">
            <div class="menu">功能1</div>
            <div class="menu">功能2</div>
            <div class="menu">功能3</div>
            <div class="menu">功能4</div>
            <div class="menu">功能5</div>
</div>

css

#menu{
    width: 0; /*设置为0 隐藏自定义菜单*/
    height: 125px;
    overflow: hidden; /*隐藏溢出的元素*/
    box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
    position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
    width: 130px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}

js

window.oncontextmenu=function(e){
    //取消默认右键
    e.preventDefault();

    //获取自定义右键菜单
    var menu=document.querySelector("#menu");

    //根据鼠标点击的位置进行定位
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';

    //改变自定义菜单的宽
    menu.style.width='100px';
    menu.style.height='auto';
}

//鼠标左键单击, 就关闭右键菜单
window.onclick=function(e){
    document.querySelector('#menu').style.height=0;
}