javascript自定义右键菜单插件
本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下
1.使用方式
js文件引入
初始化:
letrightMenu=newRightMenu({ 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) })
注:暂不支持级联功能
代码:
classRightMenu{ 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(){ letthat=this that.createMenu() this.ele.oncontextmenu=function(ee){ lete=ee||window.event; //鼠标点的坐标 letoX=e.clientX; letoY=e.clientY; //菜单出现后的位置 that.menu.style.display="block"; that.menu.style.left=oX+"px"; that.menu.style.top=oY+"px"; that.createMenu() //阻止浏览器默认事件 returnfalse;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件。 } document.oncontextmenu=function(ee){ lete=ee||window.event; if(e.target.id!==that.targetId&&e.target.dataset.type!='item'){ that.menu.style.display="none" } } document.onclick=function(ee){ lete=ee||window.event; that.menu.style.display="none" } that.menu.onclick=function(ee){ lete=ee||window.event; if(e.target.dataset.type=='item'){ if(that.event.itemClickinstanceofFunction){ 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) } letmark=true if(this.event.createBeforeinstanceofFunction){ mark=this.event.createBefore() } if(mark){ this.creatItem() } } _bindOncontextmenu(obj){ obj.oncontextmenu=function(ee){ ee.target.click() returnfalse } } creatItem(){ if(this.menuItems.length==0){ return } letfragement=document.createDocumentFragment() lettemp=null lettempItem=null for(leti=0,len=this.menuItems.length;i以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。