javascript自定义右键菜单插件
作者：单调的黑白灰
这篇文章主要为大家详细介绍了javascript自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript自定义右键菜单插件的具体代码，供大家参考，具体内容如下
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()
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。