简单右键菜单
<!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>
雕琢精美代码