利用js实现自定义右键菜单插件

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()  } }

推荐教程：js教程

以上就是利用js实现自定义右键菜单插件的详细内容，更多内容请关注技术你好其它相关文章！