简单右键菜单-CSDN博客

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <style type="text/css">
          #mune{
              position: absolute;
              display: none;
              border:1px red solid;
          }
          #mune ul{
              list-style-type: none;
              padding: 0px;
          }
          #mune a{
              text-decoration: none;
          }
          #mune a:hover{
              background-color: red;
          }
    </style>
    <script type="text/javascript">
        document.onmousedown=function(e){
            if(e.button==2){
            var mune=document.getElementById("mune");
            mune.style.display="block";
            mune.style.left= e.clientX+"px";
            mune.style.top= e.clientY+"px";
            }
        }

        document.oncontextmenu=function(){
            return false;
        }

        function init(){                   //初始函数
            var mune=document.getElementById("mune");
            CreateMune(mune);
        }
        function CreateMune(divFram){
            //制作菜单项
           var muneItem="<ul><li><a href='#'>上一页</a></li><li><a href='#'>中页</a></li><li><a href='#'>下一页</a></li></ul>";
            divFram.innerHTML=muneItem;
           var items = divFram.getElementsByTagName("a");

            //为各个a 标签绑定事件
           for(var i=0;i<items.length;i++){
               items[i].addEventListener("click",function(e){
                  alert("我在菜单上点击了："+this.innerHTML);
               },this);
           }
        }
    </script>

</head>
<body onload="init()">
         <div id="mune">

         </div>

</body>
</html>