java web右键菜单_JavaScript_Javascript实现鼠标右键特色菜单，在Web端，通常是不需要右键菜 - phpStudy...

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;

}

}

效果图：

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

js截取字符串的两种方法及区别详解

JavaScript实现Base64编码转换

js的各种排序算法实现(总结)

js识别不同浏览器基于userAgent做判断

Windows下MySQL日志基本的查看以及导入导出用法教程

JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

Windows7旗舰版禁用屏幕自动调节亮度不让其变化

javascript实现将文件保存到本地方法汇总

预装Windows10系统的设备最快将于7月30号交货

将文件夹下所有文件输出到日志文件中 c#递归算法学习示例

JQuery操作单选按钮以及复选按钮示例

php实现mysql数据库分表分段备份

java生成图片验证码示例代码

作为Java程序员应该掌握的10项技能