Javascript实现鼠标右键特色菜单

在Web端，通常是不需要右键菜单，各个浏览器也有自己的右键菜单。但是对于一些特殊的网页，是需要右键菜单来增加用户体验的，比如百度音乐，QQ邮箱，相信大家都在Web端使用过右键菜单了，现在来分享一下如何实现，比较简单。

运行代码：

window.onload = function() {
      document.oncontextmenu = block;
      document.body.onmouseup = function(event) {
 if (!event) event = window.event;
 if (event.button == 2) {
   var x = event.pageX || event.clientX;
   var y = event.pageY || event.clientY;
   document.getElementById("contextMenu").style.left = x  "px";
   document.getElementById("contextMenu").style.top = y  "px";
   document.getElementById("contextMenu").style.display = "block";
 }
      }
      //阻止事件冒泡
      document.getElementById("contextMenu").onclick = function(event) {
 event.stopPropagation();
      }
      //点击其他地方隐藏
      document.onclick = function() {
 document.getElementById("contextMenu").style.display = "none";
      }
      for (var i = 0; i < getElementsByClassName("contextMenuItem").length; i ) {
 
 getElementsByClassName("contextMenuItem")[i].onclick = function(event) {
   event = event ? event : window.event
   var target = event.srcElement ? event.srcElement : event.targe;
   document.getElementById("contextMenu").style.display = "none";
   //alert("您点击了： "  target.innerHTML);
    
 }
      }
 
    }
     
    function block(event) {
      if (window.event) {
 event = window.event;
 event.returnValue = false;
      } else event.preventDefault();
    }
    //兼容IE不支持getElementsByClassName
    function getElementsByClassName(className, root, tagName) {
      if (root) {
 root = typeof root == "string" ? document.getElementById(root) : root;
      } else {
 root = document.body;
      }
      tagName = tagName || "*";
      if (document.getElementsByClassName) { 
 return root.getElementsByClassName(className);
      } else {
 var tag = root.getElementsByTagName(tagName); 
 var tagAll = [];
 for (var i = 0; i < tag.length; i ) {
   for (var j = 0, n = tag[i].className.split(' '); j < n.length; j ) {
     if (n[j] == className) {
tagAll.push(tag[i]);
break;
     }
   }
 }
 return tagAll;
      }
    }

效果图：

以上就是本文的全部内容，希望大家可以喜欢。