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. Event

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(&#39;div&#39;)
 temp.id = tempItem.id
 temp.innerHTML = tempItem.text
 temp.className = tempItem.style || &#39;item-default&#39;
 temp.dataset.type = &#39;item&#39;
 
 this._menuItems[tempItem.id] = tempItem
 fragement.appendChild(temp)
 this._bindOncontextmenu(temp)
 }
 this.menu.innerHTML = &#39;&#39;
 this.menu.appendChild(fragement)
 }
 
 on(type,event){
 this.event[type] = event
 }
 
 hide(){
 this.menu.style.display = &#39;none&#39;
 }
 
 setItems(items){
 this.menuItems = items
 this.creatItem()
 }
}

추천 튜토리얼:

js tutorial

위 내용은 js를 사용하여 사용자 정의 오른쪽 클릭 메뉴 플러그인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!