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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。