js自定义鼠标右键菜单

document.oncontextmenu = function(e) {
    return false;
}
document.onmousedown = function(e) {

    switch(e.button) {
        case 0:
            console.log("鼠标左键")
        break;
    case 1:
        console.log("鼠标中间");
        break;
    case 2:
        console.log("鼠标右键");
            break;
        default:
            break;
    }
}

废话不多说上代码，核心知识是mousedown事件中的event对象中隐含了一个button属性，这个属性包含了3个值（IE浏览器有自己的一套实现机制，详情见下图，引用自W3School）：

由于浏览器默认有鼠标右键菜单，比如说查看网页源代码，复制，刷新，审查元素等快捷操作。有时候我们并不想使用系统默认的功能，这时候我们可以阻止系统的contextmenu事件就OK了，然后在鼠标右键点击的时候，自己模拟一个菜单（比如说用div包裹一个ui列表）；

当我们点击任何一个地方，右键菜单都应该消失才对，所以我们吧事件委托到document对象上。

document.οnclick=function () {
    //取消右键菜单，设置元素display为none
    //。。。。。业务代码
}

代码只有世纪行，是不是很简单呢？赶快动手做一个属于你自己的右键菜单吧！

转载于:https://www.cnblogs.com/zt123123/p/7831039.html