首页 > 编程 > JavaScript > 正文

Javascript实现鼠标右键特色菜单

2019-11-20 11:55:58
字体:
来源:转载
供稿:网友

在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;      }    }

效果图:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表