其实在网页上实现右键菜单的风格化已经是一个老话题了，正常情况下，网页上的右键菜单是默认IE右键选项，包括了一些常用的功能。
但有时候我们会遇到这样的问题，我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能，比如，为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码，也不希望其通过右键来对网页内容进行选取、复制等，很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽，与其这样我们还不如用脚本来实现一个风格右键菜单，并在这个右键菜单中装上我们自己的内容。下面我们来尝试一下这个设想。
我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数，这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过 document.oncontextmenu来调用的，如果我们自行定义document.oncontextmenu=某个函数，这样就可以实现新右键菜单的调用了，关键问题是如何通过这个函数来控制菜单的显示，同时，还要通过窗体的单击事件document.body.onclick（一般指左键单击）来隐藏菜单，这样一个过程就完成了鼠标右键菜单的弹出和隐藏。
<%@ page language="java" pageEncoding="GBK" %><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>css和javascript创建页面右键菜单</title>
<style type="text/css">
body {
font-family: "宋体";
font-size: 12px;
}
.skin0 {
padding-top: 4px;
text-align: left;
width: 100px;
border: 2px solid black;
background-color: menu;
font-family: "宋体";
line-height: 20px;
cursor: default;
visibility: hidden;
}
.skin1 {
padding-top: 4px;
cursor: default;
font: menutext;
text-align: left;
font-family: "宋体";
font-size: 10pt;
width: 100px;
background-color: menu;
border: 1 solid buttonface;
visibility: hidden;
border: 2 outset buttonhighlight;
}
</style>
<script language='javascript'>
function load1(){
if (document.all && window.print) {
document.oncontextmenu = showmenuie5;
document.onclick = hidemenuie5;
}
}
function showmenuie5() {
//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当//前鼠标位置向左一个菜单宽度
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else //否则，就定位菜单的左坐标为当前鼠标位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;
//*如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
//设置菜单可见
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
//jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项
function jumptoie5() {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
load1()
</script>
</head>
<body>
右键菜单创建测试，请点击右键测试一下效果吧！o(∩_∩)o...哈哈
<div id="ie5menu" class="skin0">
<div onclick="alert('后退请注意安全')">后退</div>
<div onclick="alert('祝你前程似锦，大胆往前走吧！')">前进</div>
<hr>
<div url="http://user.qzone.qq.com/648721840" target="_blank" onclick="jumptoie5()">偶偶的喜怒哀乐人生百味</div>
<div url="http://stta04.blog.163.com"
target="_blank" onclick="jumptoie5()">偶偶的BK</div>
<div url=http://stta0405.blog.163.com
target="_blank" onclick="jumptoie5()">偶偶的music</div>
<div url="http://blog.csdn.net/foamflower" target="_blank" onclick="jumptoie5()">偶偶的CSDN</div>
<hr>
<div url="http://suseyiyuan.ycool.com/<wbr>" </wbr>target="_blank" onclick="jumptoie5()">偶偶的偶像1</div>
<div url="http://qiu-7u.music.hexun.com/" target="_blank" onclick="jumptoie5()">偶偶的偶像2</div>
<hr>
<div url="http://blog.csdn.net/foamflower" target="_blank" onclick="jumptoie5()">关于本站</div>
<div url="mailto:stta0404@163.com" onclick="jumptoie5()">联系我</div>
</div>
</body>
</html>
代码解释：
1、 在页面载入时，先执行load1()方法
首先检验是不是IE浏览器，如果当前浏览器是Internet Explorer，document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。
2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。
当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。
这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，你也可以根据自定义其他样式，然后替换skin0。
3、点击菜单选项后的操作
jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项
分享到：
相关推荐
JS+CSS网页右键菜单
jQuery+HTML5右键菜单代码.zip
自定义右键菜单javascript+div,有详细注释，方便各位程序员修改，css可以随意修改方便大家个性化菜单。
javascript局部自定义鼠标右键菜单 本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码，供大家参考，具体内容如下 前言 html局部自定义鼠标右键菜单 局部！ 局部！ 局部！ 重要的关键词说三遍！ 一、...
css和javascript创建页面右键菜单 body { font-family: “宋体”; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-...
下面先给大家介绍下js实现的右键菜单功能，具体详情如下所示： 这一章解决的问题 1、实现右键菜单功能代码。 2、阻止默认事件的实际应用。 <!DOCTYPE html> <html lang="en"> <head> <meta ...
使用JavaScript，css实现的右键菜单，多个小例子 好东西
jQuery右键美化菜单特效.zip
为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单，空白区域单击时不会生成菜单。 分析： 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码： ...
html`css`js 右键弹出菜单
HTML(Hypertext Markup Language)超文本标记语言是表示网页的一种规范或标准，通过标记符定义描述页面的文本、图片、... 查看“源文件”：点击浏览器“查看”菜单的“源文件”或在页面点击鼠标右键选择“查看源文件”。
本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码，供大家参考，具体内容如下 前言 html全局自定义鼠标右键菜单 一、效果展示 二、源代码 <!DOCTYPE html> <html> <head> <...
本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码，供大家参考，具体代码如下 效果图： 具体代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
在网页中自定义点击鼠标右键时的菜单，使网站内容更丰富，提高交互性。内含JavaScript实现和CSS实现。
内容索引:脚本资源,Ajax/JavaScript,菜单 CSS+JavaScript网页右键多级展开的菜单，并屏蔽右键，用一个新的菜单来代替，比较早的一个网页特效，发现现在仍然很有用，不妨百忙之中的你参考一下。
jQuery右键菜单插件context.js.zip
jquery鼠标右键菜单多级导航代码.zip
这是一个 JavaScript 的右键菜单类，通过它我们可以快速实现右键菜单。曾用于 等项目中，为方便今后使用、抽象成类以开源~ Menu 依托于 iTorr.js ##你好，世界 如何快速添加右键菜单到网页中？ <!DOCTYPE html>...
用于网页各种dom右键菜单 使用 在使用前首先需要加载bootstrap(v3.2.0)的css文件，然后再引入本JS脚本 使用方法： 1.初始化 var menu1 = bmenu.init([ { text: '这个是菜单的文字，如果需要分隔符，则输入"---"', ...
本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码，供大家参考，具体内容如下 前言 html局部自定义鼠标右键菜单 局部！ 局部！ 局部！ 重要的关键词说三遍！ 一、效果展示 二、源代码 <!DOCTYPE html>...