首页 > 代码库 > JavaScript特效——自定义鼠标右键菜单

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

HTML
 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         }
CSS
 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 =http://www.mamicode.com/ e.currentTarget.URL;19                 } else {20                     menu.style.display = "none";21                 }22             })23         }
JavaScript

 

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