JS 屏蔽右键，创建右键菜单
2013-10-18 14:25
489 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-left:0px;
}
#contextMenu{ /* The menu container */
border:1px solid #202867; /* Border around the entire menu */
background-color:#FFF; /* White background color of the menu */
margin:0px;
padding:0px;
width:175px; /* Width of context menu */
font-family:arial;
font-size:12px;
background-image:url('images/gradient.gif');
background-repeat:repeat-y;
/* Never change these two values */
display:none;
position:absolute;
}
#contextMenu a{ /* Links in the context menu */
color: #000;
text-decoration:none;
line-height:25px;
vertical-align:middle;
height:28px;
/* Don't change these 3 values */
display:block;
width:100%;
clear:both;
}
#contextMenu li{ /* Each menu item */
list-style-type:none;
padding:1px;
margin:1px;
cursor:pointer;
clear:both;
}
#contextMenu li div{ /* Dynamically created divs */
cursor:pointer;
}
#contextMenu .contextMenuHighlighted{ /* Highlighted context menu item */
border:1px solid #000;
padding:0px;
background-color:#E2EBED;
}
#contextMenu img{
border:0px;
}
#contextMenu .imageBox{ /* Dynamically created divs for images in the menu */
float:left;
padding-left:2px;
padding-top:3px;
vertical-align:middle;
width: 30px; /* IE 5.x */
width/* */:/**/28px; /* Other browsers */
width: /**/28px;
}
#contextMenu .itemTxt{
float:left;
width: 120px; /* IE 5.x */
width/* */:/**/140px; /* Other browsers */
width: /**/140px;
}
</style>
<script type="text/javascript">
var contextMenuObj;
var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
var activeContextMenuItem = false;
function highlightContextMenuItem()
{
this.className='contextMenuHighlighted';
}
function deHighlightContextMenuItem()
{
this.className='';
}
function showContextMenu(e)
{
contextMenuSource = this;
if(activeContextMenuItem)activeContextMenuItem.className='';
if(document.all)e = event;
var xPos = e.clientX;
if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
}
var yPos = e.clientY;
if(window.document.body.scrollTop > 0)
{
yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
}
else if (window.pageYOffset)
{
yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
}
else
{ yPos = e.clientY -20; }
/* * */
contextMenuObj.style.left = xPos + 'px';
contextMenuObj.style.top = yPos + 'px';
contextMenuObj.style.display='block';
return false;
}
function hideContextMenu(e)
{
if(document.all) e = event;
if(e.button==0 && !MSIE){
}else{
contextMenuObj.style.display='none';
}
}
function initContextMenu()
{
contextMenuObj = document.getElementById('contextMenu');
contextMenuObj.style.display = 'block';
var menuItems = contextMenuObj.getElementsByTagName('LI');
for(var no=0;no<menuItems.length;no++){
menuItems[no].onmouseover = highlightContextMenuItem;
menuItems[no].onmouseout = deHighlightContextMenuItem;
var aTag = menuItems[no].getElementsByTagName('A')[0];
var img = menuItems[no].getElementsByTagName('IMG')[0];
if(img){
var div = document.createElement('DIV');
div.className = 'imageBox';
div.appendChild(img);
if(MSIE && navigatorVersion<6){
aTag.style.paddingLeft = '0px';
}
var divTxt = document.createElement('DIV');
divTxt.className='itemTxt';
divTxt.innerHTML = aTag.innerHTML;
aTag.innerHTML = '';
aTag.appendChild(div);
aTag.appendChild(divTxt);
if(MSIE && navigatorVersion<6){
div.style.position = 'absolute';
div.style.left = '2px';
divTxt.style.paddingLeft = '15px';
}
if(!document.all){
var clearDiv = document.createElement('DIV');
clearDiv.style.clear = 'both';
aTag.appendChild(clearDiv);
}
}else{
if(MSIE && navigatorVersion<6){
aTag.style.paddingLeft = '15px';
aTag.style.width = (aTag.offsetWidth - 30) + 'px';
}else{
aTag.style.paddingLeft = '30px';
aTag.style.width = (aTag.offsetWidth - 60) + 'px';
}
}
}
contextMenuObj.style.display = 'none';
document.documentElement.oncontextmenu = showContextMenu;
document.documentElement.onclick = hideContextMenu;
}
</script>
</head>
<body>
<div align="center">点击鼠标右键看效果</center>
<ul id="contextMenu">
<li><a href="http://www.sharejs.com">shareJs</a></li>
<li><a href="http://www.baidu.com">百度一下</a></li>
<li><a href="http://www.souhu.com">搜狐虎</a></li>
<li><a href="http://www.alibaba.com">阿里爸爸</a></li>
</ul>
<script type="text/javascript">
initContextMenu();
</script>
</body>
</html>
分两步走：一设置好右键菜单的大小，判断是什么浏览器；二：控制右键时候，将值放入到菜单中去
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-left:0px;
}
#contextMenu{ /* The menu container */
border:1px solid #202867; /* Border around the entire menu */
background-color:#FFF; /* White background color of the menu */
margin:0px;
padding:0px;
width:175px; /* Width of context menu */
font-family:arial;
font-size:12px;
background-image:url('images/gradient.gif');
background-repeat:repeat-y;
/* Never change these two values */
display:none;
position:absolute;
}
#contextMenu a{ /* Links in the context menu */
color: #000;
text-decoration:none;
line-height:25px;
vertical-align:middle;
height:28px;
/* Don't change these 3 values */
display:block;
width:100%;
clear:both;
}
#contextMenu li{ /* Each menu item */
list-style-type:none;
padding:1px;
margin:1px;
cursor:pointer;
clear:both;
}
#contextMenu li div{ /* Dynamically created divs */
cursor:pointer;
}
#contextMenu .contextMenuHighlighted{ /* Highlighted context menu item */
border:1px solid #000;
padding:0px;
background-color:#E2EBED;
}
#contextMenu img{
border:0px;
}
#contextMenu .imageBox{ /* Dynamically created divs for images in the menu */
float:left;
padding-left:2px;
padding-top:3px;
vertical-align:middle;
width: 30px; /* IE 5.x */
width/* */:/**/28px; /* Other browsers */
width: /**/28px;
}
#contextMenu .itemTxt{
float:left;
width: 120px; /* IE 5.x */
width/* */:/**/140px; /* Other browsers */
width: /**/140px;
}
</style>
<script type="text/javascript">
var contextMenuObj;
var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
var activeContextMenuItem = false;
function highlightContextMenuItem()
{
this.className='contextMenuHighlighted';
}
function deHighlightContextMenuItem()
{
this.className='';
}
function showContextMenu(e)
{
contextMenuSource = this;
if(activeContextMenuItem)activeContextMenuItem.className='';
if(document.all)e = event;
var xPos = e.clientX;
if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
}
var yPos = e.clientY;
if(window.document.body.scrollTop > 0)
{
yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
}
else if (window.pageYOffset)
{
yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
}
else
{ yPos = e.clientY -20; }
/* * */
contextMenuObj.style.left = xPos + 'px';
contextMenuObj.style.top = yPos + 'px';
contextMenuObj.style.display='block';
return false;
}
function hideContextMenu(e)
{
if(document.all) e = event;
if(e.button==0 && !MSIE){
}else{
contextMenuObj.style.display='none';
}
}
function initContextMenu()
{
contextMenuObj = document.getElementById('contextMenu');
contextMenuObj.style.display = 'block';
var menuItems = contextMenuObj.getElementsByTagName('LI');
for(var no=0;no<menuItems.length;no++){
menuItems[no].onmouseover = highlightContextMenuItem;
menuItems[no].onmouseout = deHighlightContextMenuItem;
var aTag = menuItems[no].getElementsByTagName('A')[0];
var img = menuItems[no].getElementsByTagName('IMG')[0];
if(img){
var div = document.createElement('DIV');
div.className = 'imageBox';
div.appendChild(img);
if(MSIE && navigatorVersion<6){
aTag.style.paddingLeft = '0px';
}
var divTxt = document.createElement('DIV');
divTxt.className='itemTxt';
divTxt.innerHTML = aTag.innerHTML;
aTag.innerHTML = '';
aTag.appendChild(div);
aTag.appendChild(divTxt);
if(MSIE && navigatorVersion<6){
div.style.position = 'absolute';
div.style.left = '2px';
divTxt.style.paddingLeft = '15px';
}
if(!document.all){
var clearDiv = document.createElement('DIV');
clearDiv.style.clear = 'both';
aTag.appendChild(clearDiv);
}
}else{
if(MSIE && navigatorVersion<6){
aTag.style.paddingLeft = '15px';
aTag.style.width = (aTag.offsetWidth - 30) + 'px';
}else{
aTag.style.paddingLeft = '30px';
aTag.style.width = (aTag.offsetWidth - 60) + 'px';
}
}
}
contextMenuObj.style.display = 'none';
document.documentElement.oncontextmenu = showContextMenu;
document.documentElement.onclick = hideContextMenu;
}
</script>
</head>
<body>
<div align="center">点击鼠标右键看效果</center>
<ul id="contextMenu">
<li><a href="http://www.sharejs.com">shareJs</a></li>
<li><a href="http://www.baidu.com">百度一下</a></li>
<li><a href="http://www.souhu.com">搜狐虎</a></li>
<li><a href="http://www.alibaba.com">阿里爸爸</a></li>
</ul>
<script type="text/javascript">
initContextMenu();
</script>
</body>
</html>
分两步走：一设置好右键菜单的大小，判断是什么浏览器；二：控制右键时候，将值放入到菜单中去
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- <script type="text/javascript" defer="defer">
- js 使FORM表单的所有元素不可编辑的示例代码
- javascript中负数算术右移、逻辑右移的奥秘探索
- JavaScript、JSP、Java及javaEE之间区别
- 在js中将number类型的数据转换成保留两位小数的字符串
- js中的window.onload()和body.onload()
- javascript数组与字符串的互转
- javaScript第三课-other标签、正则表达式及常用标签回顾
- 不会JS中的OOP，你也太菜了吧！(第二篇)
- js中实现子页面向父页面中赋值
- JSF配置常用说明
- JSF web.xml配置 .
- JSP跳转的方式
- 《威博文件管理系统》从JSF1.2升级到JSF2的过程
- javascript怎样选中一个checkbox，怎样设置它无效？
- 如何在我们项目中利用开源的图表（js chart）
- javaScript arguments 对象使用介绍
- C# 任意类型数据转JSON格式
- 能说明你的Javascript技术很烂的五个原因
- javascript字符串连接的性能