Use js to implement custom right-click menu plug-in-JS Tutorial-php.cn

Use js to implement custom right-click menu plug-in

1. How to use

js file introduction

Initialization:

let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据，json数组 })

Copy after login

2. menuItems parameters

items = [ { id: 'aa',//菜单id text: 'ccc',//菜单文字，可以是html元素 show: true, //菜单是否显示 active: false,//菜单是否可用 style: 'item-unactive' } ]

Copy after login

3. Method

setItems(menuItems) Set menu. Dynamic settings menu

hide() Hide menu

on(eventType, event) Event listening

4, event

itemClick menu item click, callback function The parameters are all attributes of the menu item

Example:

rightMenu.on('itemClick',(param) => { console.log(param) if(param.active === false){ return } alert(JSON.stringify(param)) // rightMenu.hide() })

Copy after login

createBefore is called before the menu content is generated, which can realize dynamic menu settings

Example:

rightMenu.on('createBefore',(param) => { rightMenu.setItems(items1) })

Copy after login

Note : The cascade function is not supported yet

Code:

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

Copy after login