(048)javascript_event_mycontextmenu 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>EVENT</title>
 6     <style type="text/css">
 7         *{margin: 0;padding: 0;}
 8         #myUl {
 9             width: 90px;
10             background: #CCC;
11             border: 1px solid black;
12             position: absolute;
13             display: none;
14             list-style: none;
15         }
16         
17     </style>
18     <script type="text/javascript">
19 
20         window.onload = function() {
21 
22             var myUlNode = document.getElementById("myUl");
23 
24             //IE8兼容性？？？
25             window.oncontextmenu = function(ev) {
26 
27                 var oEvent = ev || event;
28 
29                 myUlNode.style.left =  oEvent.clientX + "px";
30                 myUlNode.style.top = oEvent.clientY + "px";
31 
32                 myUlNode.style.display = "block";
33                 return false;
34             };
35 
36             document.onclick = function() {
37 
38                 myUlNode.style.display = "none";
39             };
40 
41         };
42 
43     </script>
44 </head>
45 
46 <body>
47 
48     <ul id="myUl">
49         <li>选项1</li>
50         <li>选项2</li>
51         <li>选项3</li>
52         <li>选项4</li>
53     </ul>
54     
55 </body>
56 </html>

 

posted @ 2014-03-23 11:12  雪中飞雁  阅读(58)  评论(0)    收藏  举报