javascript自定义右键菜单插件

1.使用方式
js文件引入<script src="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()
  }
}