JavaScript特效——自定义鼠标右键菜单

 1 .menu{
 2             position:absolute;
 3             width:200px;
 4             background:#eee;
 5             border:1px solid #ddd;
 6             box-shadow:2px 2px 2px 2px #999;
 7             display: none;
 8         }
 9         ul{
10             padding:0;
11             margin:0;
12             list-style-type:none;
13         }
14         ul li a{
15             padding:5px 10px;
16             display: block;
17             text-decoration:none;
18             color:#555;
19         }
20         ul li a:hover{
21             cursor:default;
22         }
23         ul li:hover{
24             background: #009CE1;
25 
26         }

 1 window.onload = function() {
 2             var doc = document;
 3             doc.oncontextmenu = function(e) {
 4                 return false;
 5             };
 6             doc.addEventListener("mousedown", function(e){
 7                 e.stopPropagation();
 8                 var target = e.target;
 9                 var buttonType = e.button;
10                 var xPos = e.clientX;
11                 var yPos = e.clientY;
12                 var menu = doc.getElementById("menu");
13                 if(buttonType === 2) {
14                     menu.style.left = xPos + "px";
15                     menu.style.top = yPos + "px";
16                     menu.style.display = "block";
17                 } else if(target.nodeName.toLocaleUpperCase() === "A"){
18                     window.Location.href = e.currentTarget.URL;
19                 } else {
20                     menu.style.display = "none";
21                 }
22             })
23         }