js文件引入<script src="https://www.jb51.net/RightMenu.js"></script>
初始化：
let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据，json数组 })
2.menuItems参数
items = [ { id: 'aa',//菜单id text: 'ccc',//菜单文字，可以是html元素 show: true, //菜单是否显示 active: false,//菜单是否可用 style: 'item-unactive' } ]
3.方法
setItems(menuItems) 设置菜单。动态设置菜单
hide() 隐藏菜单
on(eventType, event) 事件监听
4.事件
itemClick 菜单项点击，回调函数参数为菜单项的所有属性
例：
rightMenu.on('itemClick',(param) => { console.log(param) if(param.active === false){ return } alert(JSON.stringify(param)) // rightMenu.hide() })
createBefore 菜单内容生成前调用，可以实现动态菜单设置
例：
rightMenu.on('createBefore',(param) => { rightMenu.setItems(items1) })
注：暂不支持级联功能
代码：
class RightMenu{ constructor(param){ this.targetId = param.targetId this.ele = document.querySelector('#' + this.targetId) console.assert(this.ele != null, '未找到id=' + this.targetId + '的元素') this.menu = null this.menuItems = param.menuItems this._menuItems = {} this.itemDefaultClass = 'item-default' this.event = { itemClick: null, createBefore: null } this.flag = true this.init() } init(){ let that = this that.createMenu() this.ele.oncontextmenu = function(ee) { let e = ee || window.event; //鼠标点的坐标 let oX = e.clientX; let oY = e.clientY; //菜单出现后的位置 that.menu.style.display = "block"; that.menu.style.left = oX + "px"; that.menu.style.top = oY + "px"; that.createMenu() //阻止浏览器默认事件 return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。 } document.oncontextmenu = function(ee){ let e = ee || window.event; if(e.target.id !== that.targetId && e.target.dataset.type != 'item'){ that.menu.style.display = "none" } } document.onclick = function(ee) { let e = ee || window.event; that.menu.style.display = "none" } that.menu.onclick = function(ee) { let e = ee || window.event; if(e.target.dataset.type == 'item'){ if(that.event.itemClick instanceof Function){ that.event.itemClick(that._menuItems[e.target.id]) } } e.cancelBubble = true; } this.menu.onmouseover = function(ee){ that.flag = true } this.menu.onmouseleave = function(ee){ that.flag = false } } createMenu(){ if(this.menu == null){ this.menu = document.createElement('div') this.menu.className = 'menu-default' document.body.appendChild(this.menu) } let mark = true if(this.event.createBefore instanceof Function){ mark = this.event.createBefore() } if(mark){ this.creatItem() } } _bindOncontextmenu(obj){ obj.oncontextmenu = function(ee){ ee.target.click() return false } } creatItem(){ if(this.menuItems.length == 0){ return } let fragement = document.createDocumentFragment() let temp = null let tempItem = null for (let i = 0, len = this.menuItems.length; i < len; i++){ tempItem = this.menuItems[i] if(tempItem.show === false){ continue } temp = document.createElement('div') temp.id = tempItem.id temp.innerHTML = tempItem.text temp.className = tempItem.style || 'item-default' temp.dataset.type = 'item' this._menuItems[tempItem.id] = tempItem fragement.appendChild(temp) this._bindOncontextmenu(temp) } this.menu.innerHTML = '' this.menu.appendChild(fragement) } on(type,event){ this.event[type] = event } hide(){ this.menu.style.display = 'none' } setItems(items){ this.menuItems = items this.creatItem() } }