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'; } }
效果图: