如果要自定义右键菜单，那么就需要禁止原本的右键菜单，代码如下
document.oncontextmenu = new Function("return false;");//禁止右键默认菜单
该自定义右键菜单是基于jquery上的
html+css:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #js-right-menu{ background-color:#fff; z-index:9999; } #js-right-menu a{ color:#333; display:block; text-decoration:none; font-size:14px; height:25px; line-height:25px; border:1px solid #fff; padding:0 10px; } #js-right-menu a:hover{ background-color:#eee; border-color:#ddd; } .mydiv1{ background:#f8f8f8; width:200px; height:300px; } .mydiv2{ background:#ddd; width:200px; height:100px; } </style> </head> <body> <div id="mydiv" style="border:1px solid #ddd; height:400px; width:400px;"> <div class="mydiv1"></div> <div class="mydiv2"></div> </div> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/rightMenu.js"></script> <script> $(function(){ $("#mydiv").rightMenu({_width:"200px",fun:["deleteDom","nextDom","prevDom"]});//有三个默认的菜单 $(".mydiv1").rightMenu({_width:"200px",menu:["删除"],fun:["deleteDom"]});//只有删除菜单 $(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});//没有右键菜单 }); </script> </body> </html>
rightMenu.js:
function deleteDom(){ event.stopPropagation(); alert("删除"); rightMenu.removeDom(); } function nextDom(){ event.stopPropagation(); alert("下一个"); rightMenu.removeDom(); } function prevDom(){ event.stopPropagation(); alert("上一个"); rightMenu.removeDom(); } function rightMenu(opt){//右键菜单 this.cfg = $.extend({ _width:"400px", menu: ["删除","下一个","上一个"], fun: ["","function(){}","function(){}"] },opt || {}); } rightMenu.removeDom = function(){//移除菜单 var menuDom = document.getElementById("js-right-menu"); menuDom ? document.body.removeChild(menuDom) : ""; } rightMenu.stopPropagationFun = function(e){//阻止冒泡事件 if(e && e.stopPropagation){ e.stopPropagation(); }else{ //if IE window.event.cancelBubble = true; } } rightMenu.prototype.creatDom = function(e){//创建节点 var dom = document.createElement("div"); var str = ""; var pageX = e.clientX; var pageY = e.clientY; var screenW = $(window).width(); var screenH = $(window).height(); var lft = (pageX+parseInt(this.cfg._width))>screenW ? ((pageX-parseInt(this.cfg._width))<0?pageX:(pageX-parseInt(this.cfg._width)))+"px" : pageX+"px"; var top = 0; var domH = 0; //设置样式 dom.setAttribute("id","js-right-menu"); dom.style.cssText = 'width:'+(parseInt(this.cfg._width)-6)+'px;position:absolute;top:'+pageY+'px;left:'+lft+';height:auto;border:1px solid #ddd;padding:2px;'; for(var i=0; i<this.cfg.menu.length; i++){ str += '<p><a href="javascript:;" id="js-alertMenu'+i+'" onmousedown="'+this.cfg.fun[i]+'()">'+this.cfg.menu[i]+'</a></p>'; } dom.innerHTML = str; document.body.appendChild(dom); domH = $(dom).outerHeight(); top = (pageY+domH)>screenH ? (pageY-domH)+"px" : pageY+"px"; dom.style.top = top; } rightMenu.prototype.mouseEvent = function(e){//鼠标事件 rightMenu.stopPropagationFun(e);//阻止冒泡事件 document.oncontextmenu = new Function("return false;");//禁止右键默认菜单 var tagDom = $(e.target); if(tagDom.hasClass("js-right-menu") || tagDom.parents(".js-right-menu").length){ return false; } rightMenu.removeDom(); if(e.button === 2 && (this.cfg.menu.length === this.cfg.fun.length) && this.cfg.menu.length){ this.creatDom(e); } } ;(function($){ $.fn.rightMenu = function(opt){ var self = $(this); document.onmousedown = function(e){ rightMenu.removeDom();//删除节点 } self.mousedown(function(e){ rightMenu.stopPropagationFun(e);//阻止冒泡事件 var menuEvent = new rightMenu(opt); menuEvent.mouseEvent(e); }); } })(jQuery);
如果不需要有右键菜单，只需给$(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});中的menu或fun设置为空数组即可
