如何自定义js鼠标右键菜单，替换原有的右键菜单

<body oncontextmenu="return false">
在页面的body里面把原先的右键菜单屏蔽掉就ok！

解决方案 »

  1.   

    ls的非常感谢，但是我已经尝试过这种方法了，pass  ：（我是ie7  以前做的时候在ie6我记得可以有其他方法没？
      

  2.   

    我加了一个form，并且加了一个submit 按钮，我发现在按钮的边缘周围很小一部分区域内我点右键就可以满足我的要求，
    只出现我定义的菜单，不会出系统的菜单，我把form的style 的width和height都设置了100% 为什么点其他的区域就不行呢？
      

  3.   

    <!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">
    html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;}
      .contextMenu{position:absolute;width:100px;height:50px;margin:100px;padding:2px;border:1px solid #cccccc;background-color:#F2F2EE;}
      ul,li{list-style:none;margin:0px;padding:0px;}
      .item{list-style:none;margin:0px;padding:0px;height:25px;line-height:25px;display:block;padding:0px;padding-left:10px;}
      .itemOver{background-color:#316AC5;color:#fff;cursor:default;}
       .separator{height:1px;border-top:1px solid #cccccc;margin:0px;padding:0px;}
    </style><script type="text/javascript">
    <!--function contextMenu(props,events){
       this.props = props;
       this.events = events;
    }contextMenu.prototype.buildContextMenu = function(){
       var menuObj = document.getElementById(this.props.menuID);
       var targetEle = this.props.targetEle;
       var eventFunc = this.events;   document.oncontextmenu = function(evt){
       try{
        clearEventBubble(evt);
      var cobj = ele(evt);
      if(cobj.className == targetEle){
      
       var _items = menuObj.getElementsByTagName("li");
       for(var i=0;i<_items.length;i++){
       if(_items[i].className != "separator"){
        _items[i].className = "item";
        _items[i].onmouseover = function(){this.className ="item itemOver";};
        _items[i].onmouseout = function(){this.className = "item";} ;
        _items[i].onclick = function(){hide();func(this.id,cobj);};
         }
       }
      
       var _bodyWidth = document.body.offsetWidth ||document.body.clientWidth;
       var _bodyHeight = document.body.offsetHeight || document.body.clientHeight;
       var _mWidth = menuObj.style.width;
       var _mHeight = menuObj.offsetHeight;
      
    menuObj.style.left =((parseInt(getX(evt))+parseInt(_mWidth)) > parseInt(_bodyWidth)?(parseInt(getX(evt))-parseInt(_mWidth)):getX(evt))+"px";
    menuObj.style.top =((parseInt(getY(evt))+parseInt(_mHeight)) > parseInt(_bodyHeight)?(parseInt(getY(evt))-parseInt(_mHeight)):getY(evt))+"px";
       menuObj.style.display = "block";

      }else{
        hide();
      }
      
      }catch(e){
      }finally{
       clearEventBubble(evt);
       return false;
      }
      
     }
     
     document.onclick = function(){hide();}
      
      func = function(fid,srcEle){
       eventFunc.bindings[fid](srcEle);
      }
      
      hide = function(){
         try{
        if(menuObj){
         menuObj.style.display = "none";
         }
       }catch(e){}
      }
      ele = function(evt){
          evt = evt||window.event;
      return (evt.srcElement || evt.target);
       }}
    /*==============================================================*/
      function getX(evt){
      evt = evt || window.event;
       /**
       CssRain---增加代码. 8月20日 
       使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
       */
    var scrollPosX; 
    if (typeof window.pageYOffset != 'undefined') { 
       scrollPosX = window.pageXOffset; 
    } 
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
       scrollPosX = document.documentElement.scrollLeft; 
    } 
    else if (typeof document.body != 'undefined') { 
       scrollPosX = document.body.scrollLeft; 
    }    return (evt.x || evt.clientX || evt.pageX)+scrollPosX;
    }

    function getY(evt){
    evt = evt || window.event;
    /**
       CssRain---增加代码. 8月20日 
       使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
       */
    var scrollPosY; 
    if (typeof window.pageYOffset != 'undefined') { 
       scrollPosY = window.pageYOffset; 
    } 
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
       scrollPosY = document.documentElement.scrollTop; 
    } 
    else if (typeof document.body != 'undefined') { 
       scrollPosY = document.body.scrollTop; 
    }    return (evt.y || evt.clientY || evt.pageY)+scrollPosY;
    }

    function clearEventBubble(evt){
       evt = evt || window.event;
       
       if(evt.stopPropagation){
         evt.stopPropagation();
       }else{
         evt.cancelBubble = true; 
       }
       
        if(evt.preventDefault){
          evt.preventDefault();
        }else{ 
           evt.returnValue = false;
        } } //-->
    </script></head>
    <body>
     <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
      <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
    <div id="c11" class="contextMenu" style="top:20px;left:100px;">c11 -- 右击我</div>
    <div id="c22" class="contextMenu" style="top:20px;left:250px;">c22 -- 右击我</div>
    <div id="c33" class="contextMenu" style="top:20px;left:400px;">c33 -- 右击我</div>
    <div id="c44" class="contextMenu" style="top:20px;left:550px;">c44 -- 右击我</div>
     <div id="bmenu" style="position:absolute;display:none;top:0px;left:0px;width:150px;margin:0px;padding:2px;border:1px solid #cccccc;background-color:#CEE2FF;">
      <ul>
      <li id="checkLink">检测连接</li>
      <li id="edit">编辑</li>
      <li id="del">删除</li>
      <li class="separator"></li>
      <li id="prop">属性</li>
      </ul>
     </div>
     <br/>
    </body>
    <script type="text/javascript">
     var cmenu = new contextMenu(
        {
       menuID : "bmenu",
       targetEle : "contextMenu"
      },
      {
       bindings:{
        'checkLink' : function(o){alert("检测连接 "+o.id);},
        'edit' : function(o){alert("编辑 "+o.id);},
        'del' : function(o){alert("删除 "+o.id);},
        'prop' : function(){alert("查看属性");}
        }
       }
      );
     
     cmenu.buildContextMenu();
    </script>
    <!--google广告开始-->
    <style>
    *{
     font-size:12px;
    }
    .highlight{
     font-weight:bold;
     color:red;
    }
    </style>
    <p class="highlight">如果觉得代码对你有帮助 , 请广告支持cssrain.</p>
    <div style="text-align:center:">
    <script type="text/javascript"><!--
    google_ad_client = "pub-0545040803774316";
    /* 728x90, 创建于 08-6-5 */
    google_ad_slot = "7034803449";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    <!--google广告结束-->
    </html>