阻止鼠标右键，自定义右键菜单
http://www.webtall.com/index.php/archives/643
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Html代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> *{margin:0; padding:0;} #ul1{width:100px; background:#ccc; position:absolute; display:none; list-style-type:none;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>阻止鼠标右键，自定义右键菜单</title> <script type="text/javascript"> document.oncontextmenu=function(ev) //oncontextmenu事件为鼠标右键 { var oEvent=ev||event; var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //获取上下滚动条 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; //获取左右滚动条 var oUl=document.getElementById('ul1'); //获取UL oUl.style.display='block'; oUl.style.left=oEvent.clientX+scrollLeft+'px'; //设置X轴的位置 oUl.style.top=oEvent.clientY+scrollTop+'px'; //设置Y轴的位置 return false; //阻止浏览器默认事件 }; document.onclick=function() { var oUl=document.getElementById('ul1'); oUl.style.display='none'; }; </script> </head> <body> <ul id="ul1"> <li><a href="http://www.webtall.com">五指前端</a></li> <li><a href="http://www.webtall.com">五指前端</a></li> <li><a href="http://www.webtall.com">五指前端</a></li> </ul> </body> </html> |
