13518219792
今天小编给大家分享的是利用js实现自定义右键菜单插件的详细步骤，很多人都不太了解，今天小编为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。
发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都玻璃隔断等，在重庆网站建设、全网营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。
1、使用方式
js文件引入
初始化：
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实现自定义右键菜单插件的详细步骤的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注创新互联行业资讯频道哦！
