javascript自定义右键菜单详解
本章节分享一段代码实例，它实现了自定义右键菜单的功能。
下面就给出代码实例，并且做一下详细分析介绍，需要的朋友可以做一下参考。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
width: 254px;
font-size: 12px;
position: fixed;
top: 0px;
left: 0px;
padding-top: 2px;
border: 1px solid #ccc;
display: none;
}
#menu li {
list-style: none;
line-height: 25px;
margin-left: -1px;
padding-left: 26px;
}
#menu li:hover {
background-color: #4281f4;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function () {
var menu = document.getElementById("menu");
document.oncontextmenu = function (e) {
var e = e || window.event;
menu.style.display = "block";
var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ?
(document.documentElement.clientWidth - menu.offsetWidth) : e.clientX;
var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight) ?
(document.documentElement.clientHeight - menu.offsetHeight) : e.clientY;
menu.style.left = cakLeft + "px";
menu.style.top = cakTop + "px";
return false;
}
document.onclick = function () {
menu.style.display = "none";
}
}
</script>
</head>
<body>
<ul id="menu">
<li>返回(B)</li>
<li>前进(F)</li>
<li>从新加载(R)</li>
<li>另存为(A)</li>
<li>打印(P)</li>
<li>查看网页源代码(V)</li>
<li>查看网页信息(I)</li>
<li>审查元素(N)</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var menu = document.getElementById("menu")，获取id属性值为menu的元素对象。
（3）.document.oncontextmenu = function (e) {}，为document注册oncontextmenu事件，也就是右键会弹出菜单。
（4）.var e = e || window.event，兼容所有浏览器的事件对象。
（5）.menu.style.display = "block"，显示右键菜单。
（6）.var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ?
(document.documentElement.clientWidth - menu.offsetWidth) : e.clientX，如果点击右键时，鼠标指针在浏览器客户区的坐标距离客户区右侧的距离小于自定义菜单的宽度，那么设置此菜单的left属性值就是浏览器客户区宽度减去菜单宽度，否则就是鼠标指针在客户区的坐标值。
（7）.menu.style.left = cakLeft + "px";
menu.style.top = cakTop + "px";
设置右键菜单的left和top值。
（8）.return false，这个很重要，取消默认动作，否则系统自带的右键菜单也会出现。
（9）.document.onclick = function () {
menu.style.display = "none";
}，点击document就会隐藏右键菜单。
javascript自定义右键菜单详解，这样的场景在实际项目中还是用的比较多的，关于javascript自定义右键菜单详解就介绍到这了。
javascript自定义右键菜单详解属于前端实例代码，有关更多实例代码大家可以查看。