js实现鼠标右键弹出自定义内容

其实这个总的分为三步，一步一步实现很简单

• 屏蔽浏览器默认右击事件
• 获取鼠标右键时的 x,y 的位置
• 自定义鼠标右键事件

屏蔽浏览器默认右击事件

对于不同浏览器需要进行处理，以下代码可以兼容 IE

menuDis() {
    document.oncontextmenu = function (e){
        if(navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
            // IE屏蔽
            window.event.returnValue = false
        }else {
            // 其他
            e.preventDefault()
        }
        return false
    }
}

获取鼠标右键时的 x,y 的位置

对于不同浏览器需要进行处理，以下代码可以兼容 IE

fcuntion getXY() {
    var posX = 0, posY = 0;  // 临时变量值
    var e = event || window.event;  // 标准化事件对象
    if (e.pageX || e.pageY) {  // 获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    return ([posX, posY])
}

自定义鼠标右键事件

这里我的是 vue 用的是 @mouseup 所以我要判断 e.button === 2 这个的意思就是鼠标右键 0 为左键 1 为中间的滚轮

function myMenu() {
    if(e.button === 2) {
        // 这里是你要执行的代码
    }
    
    return false
},

到这里自定义鼠标右键事件就结束了，要显示内容可以在 myMenu 中编写自己的逻辑