這篇文章將為大家詳細(xì)講解有關(guān)javascript中如何自定義右鍵菜單插件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)拜泉,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

具體內(nèi)容如下

1.使用方式

js文件引入<script src="RightMenu.js"></script>

初始化：

let rightMenu = new RightMenu({
   targetId:'menu',//需要改變右鍵菜單的元素id
   menuItems: items//菜單項(xiàng)數(shù)據(jù)，json數(shù)組
   })

2.menuItems參數(shù)

items = [
 {
 id: 'aa',//菜單id
 text: 'ccc',//菜單文字，可以是html元素
 show: true, //菜單是否顯示
 active: false,//菜單是否可用
 style: 'item-unactive'
 }
]

3.方法

setItems(menuItems) 設(shè)置菜單。動(dòng)態(tài)設(shè)置菜單

hide() 隱藏菜單

on(eventType, event) 事件監(jiān)聽

4.事件

itemClick 菜單項(xiàng)點(diǎn)擊，回調(diào)函數(shù)參數(shù)為菜單項(xiàng)的所有屬性

例：

rightMenu.on('itemClick',(param) => {
 console.log(param)
 if(param.active === false){
 return
 }
 alert(JSON.stringify(param))
 // rightMenu.hide()
})

createBefore 菜單內(nèi)容生成前調(diào)用，可以實(shí)現(xiàn)動(dòng)態(tài)菜單設(shè)置

例：

rightMenu.on('createBefore',(param) => {
 rightMenu.setItems(items1)
})

注：暫不支持級(jí)聯(lián)功能

代碼：

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;
 //鼠標(biāo)點(diǎn)的坐標(biāo)
 let oX = e.clientX;
 let oY = e.clientY;
 //菜單出現(xiàn)后的位置
 that.menu.style.display = "block";
 that.menu.style.left = oX + "px";
 that.menu.style.top = oY + "px";
 that.createMenu()
 //阻止瀏覽器默認(rèn)事件
 return false;//一般點(diǎn)擊右鍵會(huì)出現(xiàn)瀏覽器默認(rèn)的右鍵菜單，寫了這句代碼就可以阻止該默認(rèn)事件。
 }
 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()
 }
}

關(guān)于“javascript中如何自定義右鍵菜單插件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：javascript中如何自定義右鍵菜單插件
網(wǎng)站鏈接：http://chinadenli.net/article20/gphsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站策劃、靜態(tài)網(wǎng)站、微信公眾號(hào)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)