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

前端  /  管理员 发布于 7年前   273

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实现自定义右键菜单插件的详细内容，更多请关注其它相关文章！