用Javascript实现的简单右键菜单类

本文描述了一个由Javascript实现的简单右键菜单类。分享给大家参考。具体如下：

这是我自己写的右键菜单类，屏蔽了IE固有的右键菜单。总共有四个参数：第一个是开始显示右键菜单的div的id。

第二个是右键菜单层的id，根据它创建一个新的层。menuList是菜单项列表，对应于点击菜单项后触发的功能。classList是菜单的类名和菜单项对应的类名，包括鼠标悬停时的类。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-右键-菜单-类-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题右键菜单/titlestyle type='text/css ' .cmenu { position : absolutetop :100 pxleft :100 px宽度宽度：200像素高度：200 px背景-颜色：白色；border:1px纯粉色；}.责任{ font-family: '宋体；颜色： # 6699 cc边距-左侧：10 px页边距-顶部：5 px列表样式-:型无；cursor:default}。liMouseOver {边距-左侧：10 px页边距-顶部：5 px背景-颜色： # CCFFFF列表样式-:型无；cursor : default }/style/head dydiv style=' margin-left : auto；右边距：汽车；高度：300 px宽度：60%;背景色： # cc 6699 ' id=' x '/divinput type=' hidden ' id=' value 1 ' value=' 4 '/输入类型=' hidden ' id=' value 2 ' value=' 5 '/脚本类型='text/javascript'//右键菜单类函数RightHandMenu(div，menuDiv，menuList，类列表){ var Othis=this这个_menuList={ }这个_classList={ objClass: ' '，MenuClass: ' '，liAbleClass: ' '，liMouseOverClass:'' }此Init=function() { this ._ obj=$(div)；这个_ obj。oncontext menu=function(e){ Othis .显示菜单(e)}；这个_obj.className=this ._ classList.objClassdocument。onclick=function(){ Othis .HiddenMenu()}；objToObj(这个. classList，class list)；objToObj(这个_menuList，menuList)；}这个创建菜单=函数(){ if($(MenuDiv)){ alert('该身份已被占用');返回；}这个_ menu=文档。创建元素(' DIV ')；这个_ menu.id=menuDiv这个菜单。oncontext menu=function(e){ stop bubble(e)}；这个_menu.className=this ._类别列表.菜单类；这个菜单。风格。显示='无'；document.body.appendChild(这。_菜单);}这个createMenulist=function(){ for(var pro在此_ MenuList){ var LI=document。create element(' LI ')；li.innerHTML=pro这个菜单。阑尾(李)；li.className=这个_ CLaSS列表。责任类别；li.onclick=这个_ MenuList[pro]；李。onmouseover=function(){ Othis .ChangeLiClass(这个，没什么类列表。limouseoverclass)}李。onmouseout=function(){ Othis .ChangeLiClass(这个，没什么_classList.liAbleClass)} } }此ChangeLiClass=function(obj，name) { obj.className=name }这个.显示菜单=功能(e){ var e=e | |窗口。事件；停止气泡(e)；var offsetX=e . clientxvar offsetY=e . clienty用这个菜单。style){ display=' block '；top=offsetY ' pxleft=offsetX ' px } }这个HiddenMenu=function() { this ._菜单。风格。显示='无'；}这个init()；这个创建菜单()；这个createMenulist()；}函数停止气泡(oEvent){ if(oEvent。stopper propagation)oEvent。stopperpagation()；else oevent . cancelubble=true if(oevent。防止默认)oevent。防止默认值()；else oEvent.returnValue=false}函数$(div){返回' string '==div的类型？文件。getelementbyid(div): div；}函数objToObj(目标，源){ for(var pro in source){ destination[pro]=source[pro]；}返回目的地；}//构造右键菜单函数编辑(){警报('编辑')；}函数Delete(){ alert(' Delete ')；} var menuList={编辑：编辑，删除： delete } var class list={ menuclass : ' CME nu '，liAbleClass: ' liAble '，limouseoverclass : ' liMouseOver ' } var x=新的右侧菜单(' x '，' testDiv '，menuList，class list)/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。