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

1. How to use

js file introduction<script src="RightMenu.js"></script>

Initialization:

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

2. menuItems parameters

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

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

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

Example:

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

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(&#39;div&#39;)
 temp.id = tempItem.id
 temp.innerHTML = tempItem.text
 temp.className = tempItem.style || &#39;item-default&#39;
 temp.dataset.type = &#39;item&#39;
 
 this._menuItems[tempItem.id] = tempItem
 fragement.appendChild(temp)
 this._bindOncontextmenu(temp)
 }
 this.menu.innerHTML = &#39;&#39;
 this.menu.appendChild(fragement)
 }
 
 on(type,event){
 this.event[type] = event
 }
 
 hide(){
 this.menu.style.display = &#39;none&#39;
 }
 
 setItems(items){
 this.menuItems = items
 this.creatItem()
 }
}

Recommended tutorial:js tutorial

The above is the detailed content of Use js to implement custom right-click menu plug-in. For more information, please follow other related articles on the PHP Chinese website!