js实现右键菜单效果

【Javascript】

下载

新闻

文章

js实现右键菜单效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jS实现自定义右键菜单</title>
    <style type="text/css">
        #menu {
            width : 130px;
            border : 1px solid gray;
            margin:0;
            padding : 2px 2px 2px 20px;
            list-style-type: none;
            visibility : hidden;
            position : absolute;
            background-color: #efefef;
            box-shadow: 3px 3px rgba(0,0,0,.2);
        }
        #menu li {text-decoration : none;font-size: 14px;color: #333;}
        #menu li:hover {background-color : #d8d8d8;cursor: pointer}
    </style>
    <script>
  window.onload = function(){
      var doc = document.documentElement;
      var menu = document.getElementById("menu");
      document.oncontextmenu = function (){return false};
      function dealEvent(obj,evt,callback){
          window.addEventListener ? obj.addEventListener(evt,callback,false) : obj.attachEvent("on"+evt,callback);
      }
      dealEvent(document,"contextmenu",show_menu);
      dealEvent(document,"click",click_event);
      function show_menu(e){
          e = e||window.event;
          menu.style.left = (doc.clientWidth + doc.scrollLeft - e.clientX > menu.offsetWidth ? e.clientX : e.clientX - menu.offsetWidth) +"px";
          menu.style.top  = (doc.clientHeight + doc.scrollTop - e.clientY > menu.offsetHeight ? e.clientY : e.clientY - menu.offsetHeight) +"px";
          menu.style.visibility = "visible";
      }
      function click_event(e){
          e = e || window.event;
          if(e.which !=3){
              //ff右键也会触发click事件
              var p = e.target ? e.target : e.srcElement;
              if(p.parentNode.id != "menu"){
                  menu.style.visibility = "hidden";
              }else{
                  document.all ? window.event.cancelBubble = true : e.stopPropagation();
              }
          }
      }
  };
    </script>
</head>
<body>
<ul id="menu">
    <li>后退</li>
    <li>前进</li>
    <li>地图api</li>
    <li>实时交通<hr/></li>
    <li>地图搜索</li>
    <li>驾驶导航</li>
    <li>灵图UU<hr/></li>
    <li>路书下载</li>
    <li>关于本站</li>
    <li>友情链接</li>
</ul>
</body>
</html>