这篇文章主要介绍了javascript实现的简单右键菜单类，通过javascript自定义类实现右键菜单功能，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：
这是自己写的一个右键菜单类，屏蔽掉了ie固有的右键菜单，一共有四个参数：第一个是出发显示右键菜单的p的id
第二个是右键菜单这个层的id，根据这个id去创建一个新的层，menulist是菜单项的列表，对应了点击一个菜单项后触发的函数，classlist是菜单的class名称，以及菜单项对应的class名称，包含了鼠标滑过时的class。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-right-button-menu-class-codes/
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>右键菜单</title><style type="text/css">.cmenu{ position:absolute; top:100px; left:100px; width:200px; height:200px; background-color:white; border:1px solid pink;}.liable{ font-family:"宋体"; color:#6699cc; margin-left:10px; margin-top:5px; list-style-type:none; cursor:default;}.limouseover{ margin-left:10px; margin-top:5px; background-color:#ccffff; list-style-type:none; cursor:default;}</style></head><body><p style="margin-left:auto; margin-right:auto; height:300px; width:60%;background-color:#cc6699" id="x"></p><input type="hidden" id="value1" value="4" /><input type="hidden" id="value2" value="5" /><script type="text/javascript">//右键菜单类function righthandmenu(p,menup,menulist,classlist){ var othis = this; this._menulist = { } this._classlist = { objclass:'', menuclass:'', liableclass:'', limouseoverclass:'' } this.init = function() { this._obj = $(p); this._obj.oncontextmenu = function(e){othis.showmenu(e)}; this._obj.classname = this._classlist.objclass; document.onclick = function(){othis.hiddenmenu()}; objtoobj(this._classlist, classlist); objtoobj(this._menulist, menulist); } this.createmenu = function() { if($(menup)) { alert("该id已被占用"); return; } this._menu = document.createelement("p"); this._menu.id = menup; this._menu.oncontextmenu = function(e){stopbubble(e)}; this._menu.classname = this._classlist.menuclass; this._menu.style.display = "none"; document.body.appendchild(this._menu); } this.createmenulist = function() { for(var pro in this._menulist) { var li = document.createelement("li"); li.innerhtml = pro; this._menu.appendchild(li); li.classname = this._classlist.liableclass; li.onclick = this._menulist[pro]; li.onmouseover = function(){othis.changeliclass(this,othis._classlist.limouseoverclass)} li.onmouseout = function(){othis.changeliclass(this,othis._classlist.liableclass)} } } this.changeliclass = function(obj,name) { obj.classname = name } this.showmenu = function(e) { var e = e || window.event; stopbubble(e); var offsetx = e.clientx; var offsety = e.clienty; with(this._menu.style) { display = "block"; top = offsety + "px"; left = offsetx + "px"; } } this.hiddenmenu = function() { this._menu.style.display = "none"; } this.init(); this.createmenu(); this.createmenulist();}function stopbubble(oevent){ if(oevent.stoppropagation) oevent.stoppropagation(); else oevent.cancelbubble = true; if(oevent.preventdefault) oevent.preventdefault(); else oevent.returnvalue = false;}function $(p){ return 'string' == typeof p ? document.getelementbyid(p) : p;}function objtoobj(destination,source){ for(var pro in source) { destination[pro] = source[pro]; } return destination;}//构造右键菜单function edit(){ alert("edit");}function delete(){ alert("delete");}var menulist = { 编辑:edit, 删除:delete}var classlist = { menuclass:'cmenu', liableclass:'liable', limouseoverclass:'limouseover'}var x = new righthandmenu("x","testp",menulist,classlist)</script></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！