1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>测试DOM结点操作</title> 7 <style type="text/css"> 8 .menubox_active { 9 background-color: #ccc; 10 border: 1px solid #ddd; 11 margin: 0px; 12 padding: 0px; 13 width: 200px; 14 font-weight: bold; 15 font-size: larger; 16 list-style: none; 17 } 18 .menubox_active li { 19 padding-left: 10px; 20 line-height: 25px; 21 } 22 .menubox_active li:hover { 23 background-color: #c0c0FF 24 } 25 a:link { 26 color: #000; 27 } 28 a:visited { 29 color: blue; 30 } 31 a:hover { 32 color: #FF7400; 33 } 34 a:active { 35 color: #F7A300; 36 } 37 </style> 38 <script type="text/javascript"> 39 window.onload = function() { 40 var ull = document.getElementById("ull"); 41 ull.style.display = "none"; 42 43 //设置右键菜单可见，并根据鼠标点击位置出现 44 document.getElementById('div1').oncontextmenu = function(event) { 45 event = window.event ? window.event : event; 46 ull.className = "menubox_active"; 47 ull.style.display = "block" 48 ull.style.position = "absolute"; 49 ull.style.left = (event.clientX ? event.clientX : event.X) + "px"; 50 ull.style.top = (event.clientY ? event.clientY : event.Y)+ "px"; 51 return false; 52 }; 53 //取消鼠标右键弹出菜单的可见性 54 document.onmousedown = function() { 55 ull.style.display = "none" 56 }; 57 } 58 </script> 59 </head> 60 <body> 61 <h1>测试DOM结点操作</h1> 62 <div id="div1" style=" 200px; height: 200px; border: solid 1px blue"></div> 63 <ul id="ull" class="menubox"> 64 <li> 65 <a href="http://baidu.com">baidu</a> 66 </li> 67 <li> 68 <a href="#">#####</a> 69 </li> 70 </ul> 71 </body> 72 </html>