javascript自定义右键菜单插件

本文实例为大家分享了javascript自定义右键菜单插件的具体代码，供大家参考，具体内容如下

1.使用方式

js文件引入

初始化：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。