给页面的某个区域添加右键菜单,代码如下:
// 禁用整个页面的所有浏览器默认右击事件
document.oncontextmenu = function(){
return false;
}
// 点击此div出现右键菜单
let contextMenu = document.getElementsByClassName('app-tabs-main')[0]
// 点击出现的菜单div
let divCon = document.getElementsByClassName('context-menu-tab')[0];
// 给div绑定右击事件
contextMenu.addEventListener('contextmenu', function (event) {
// 设置右键菜单显示
divCon.style.display = 'block'
// 设置右键菜单的展示位置
divCon.style.left = event.clientX + 'px'
divCon.style.top = event.clientY + 'px'
// 添加页面的监听事件 - 点击页面任意一处菜单隐藏
document.addEventListener('click', removeClickFun)
// 隐藏掉右键菜单
function removeClickFun () {
// 隐藏菜单
divCon.style.display = 'none';
// 取消页面的监听
document.removeEventListener('click', removeClickFun)
}
})