var RightMenu = function(){
this.rightMenu = null;
this.rightMenuList = [];
this.itemIndex = 0;
}
RightMenu.prototype = {
init:function(){
this._preventDefaultRightMenu(); //初始化時阻止默認事件
this._createRightMenu(); //創建右鍵菜單
this._rightClickEvent(); // 添加點擊右鍵菜單的事件
},
_preventDefaultRightMenu:function(){
document.addEventListener('contextmenu',function(event){
event.preventDefault();
},false)
},
_createRightMenu:function(){
this.rightMenu = document.createElement('ul');
this.rightMenu.id = 'rightMenu';
document.body.appendChild(this.rightMenu);
},
_rightClickEvent:function(){
//給document綁定右鍵事件
document.addEventListener('contextmenu',function(event){
var menu = document.getElementById('rightMenu');
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.display = 'block';
},false)
},
_createRightMenuItem:function(item,callback){
var li = document.createElement('li');
li.id = 'rightMenuItem_' + this.itemIndex;
li.innerHTML = item;
this.rightMenu.appendChild(li);
li.addEventListener('click',callback,false);
this.itemIndex++;
},
addRightMenuItem:function(itemText,callback){ //供外部調用的方法傳入兩個參數(菜單文字,點擊時的回調函數)
this.rightMenuList.push(itemText);
this._createRightMenuItem(itemText,callback);
}
}
//使用時初始化對象
var rightMenu = new RightMenu();
rightMenu.init();
//添加右鍵菜單和回調函數
rightMenu.addRightMenuItem('全選',function(event){
alert('全選')
});
rightMenu.addRightMenuItem('單選',function(event){
alert('單選')
});
js實現一個簡單的自定義右鍵菜單
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.