其实在网页上实现右键菜单的风格化已经是一个老话题了，正常情况下，网页上的右键菜单是默认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网页右键菜单
在HTML+JavaScript右键菜单的实现中，JSP可能被用作后端服务，处理与菜单相关的数据请求或逻辑，例如根据用户状态或权限动态生成菜单项。 实现步骤如下： 1. 创建HTML结构：在HTML文件中，定义一个用于存放菜单的...
通过jQuery的事件处理和DOM操作，配合HTML5的`<menu>`和`<command>`元素，以及CSS样式，我们可以创建出功能强大、用户体验良好的自定义右键菜单。这个压缩包中的示例代码对于学习和应用此类功能的开发者来说，是一份...
【dtree动态树】是一种基于JavaScript的客户端树形控件，用于在网页中展示层级关系的数据。它允许用户以交互式的方式浏览和操作数据...通过结合dtree和JavaScript右键菜单，开发者可以创建出功能丰富的交互式Web界面。
综上所述，"Tree+完美右键菜单"是一个结合了HTML、CSS和JavaScript技术的实践案例，旨在创建一个功能强大且用户体验良好的树形结构右键菜单。通过理解并应用这些知识点，开发者可以为他们的Web应用增添更多互动性和...
在JavaScript中，右键菜单通常是通过原生浏览器事件来实现的，而在Vue中，我们可以通过监听原生事件或使用第三方插件来创建自定义的右键菜单。以下是使用Vue实现自定义右键菜单的详细步骤： 1. **事件监听**： 在...
标题中的“右键菜单(javaScript)”指的是使用JavaScript编程语言实现的网页上下文菜单，即当用户在网页上点击鼠标右键时出现的功能性菜单。这种菜单可以替代或扩展浏览器默认的右键菜单，提供更加定制化的用户体验。...
通过以上这些知识点，我们可以构建出一个功能丰富的JavaScript右键菜单系统，不仅可以提供个性化的用户体验，还可以根据业务需求添加更多功能，如复制、粘贴、保存等。在实际项目中，可以结合其他前端框架（如React...
综上所述，"Web右键菜单 很不错的右键菜单"可能是一个致力于提升用户体验的Web开发实践，通过JavaScript、CSS和HTML技术实现自定义功能，同时兼顾了易用性、扩展性和性能优化。通过深入理解和应用这些技术，开发者...
总结起来，禁止鼠标右键和在SVG中自定义右键菜单涉及到JavaScript事件处理和DOM操作。通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和...
通常，网页上的鼠标右键点击事件会被浏览器默认的上下文菜单所捕获，但通过自定义JavaScript代码，我们可以覆盖这个行为，创建出个性化且功能丰富的右键菜单。 首先，要理解JavaScript事件处理机制。在HTML元素上...
本教程将基于提供的"Javascript右键创建菜单源码"进行深入讲解，帮助你理解如何实现这一功能。 首先，让我们分析`rclick.html`这个文件名。这通常是一个包含HTML结构的文件，其中可能包含了JavaScript代码来处理...
通过以上步骤，我们就成功地创建了一个基于 JavaScript 的右键菜单。这个过程涵盖了事件处理、DOM 操作、样式设置以及响应式设计等关键知识点，非常适合 JavaScript 初学者学习实践。记住，良好的用户体验是设计右键...
本文将深入探讨如何使用JavaScript实现右键菜单，特别是如何动态添加菜单项，并在菜单项中添加图标、文本以及处理点击事件。此外，我们还将讨论在不同浏览器（如IE、Firefox和Chrome）中的兼容性问题。 首先，右键...
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
本项目“jQuery CSS Bootstrap风格带阴影的右键菜单”则是在Bootstrap的基础上，进一步拓展了网页的交互性，通过jQuery库实现了右键菜单的功能，为用户提供了一种更加直观的操作方式。 首先，我们要理解Bootstrap的...
3. **创建右键菜单**：在 `contextmenu` 事件的回调函数中，阻止浏览器默认的右键菜单弹出，并自定义我们的菜单。这通常涉及到CSS样式的设计以及DOM元素的创建。可以使用 `event.preventDefault()` 阻止默认菜单，...
通过实践和修改，可以创建出适应自己项目需求的、既实用又美观的JavaScript右键菜单。 总结，JavaScript右键菜单是增强网页交互性和用户体验的重要工具。理解其工作原理，掌握创建和优化的方法，将使你的网页更加...
综上所述，这段代码提供了一个基本的自定义右键菜单实现框架，通过HTML和JavaScript结合的方式实现了菜单的创建、显示和隐藏等功能。对于想要深入理解如何在网页中实现自定义右键菜单的开发者来说，这段代码提供了很...