今天小编给大家分享的是利用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实现自定义右键菜单插件的详细步骤的简略介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注亿速云行业资讯频道哦!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。