JavaScript中的额事件二

JavaScript中的额事件二

 小例子：右键自定义菜单；

 html:

 <div id="div1">
      <ul id="ul1">
        <li>菜单一</li>
        <li>菜单二</li>
        <li>菜单三</li>
        <li>菜单四</li>
      </ul>
   </div>

 css：

 #div1{
     display:none;
     height:100px;
     width:80px;
     background:#ccc;
     position:absolute; 
 }
 #div1 ul{
     padding:0px;
     margin:0px;
 }
 #div1 ul li{
     margin-top:2px;
     list-style:none;
 }

 javascript：

   function getPosition(e){
       var clientx=e.clientX;
       var clienty=e.clientY;
       var scrollLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
       var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
       var x=clientx+scrollLeft;
       var y=clienty+scrollTop;
       return {x:x,y:y};
   }
   window.onload=function (){
     document.oncontextmenu=function (ev){
         var e=ev || event;
         var obj=document.getElementById("div1");
         var pos=getPosition(e);
         obj.style.left=pos.x+'px';
         obj.style.top=pos.y+'px';
         obj.style.display='block';
         //如果加上运动框架，我们可以做出淡入淡出的效果滴呀 
         return false;
     }
     document.onclick=function (){
       var obj=document.getElementById("div1");
       obj.style.display='none';     
     }
   }

效果图：