Firfox,IE,Chrome全支持的右键菜单

来源：互联网发布：淘宝互刷诈骗案例编辑：程序博客网时间：2024/06/05 08:04

<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 12px; MARGIN: 10px 0px 0px; FONT-FAMILY: "宋体"
}
.skin0 {
BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 100px; CURSOR: default; LINE-HEIGHT: 20px; PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 100px; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.menuitems {
PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
</STYLE>

<SCRIPT language=javascript>
<!--
//定义菜单显示的外观，可以从上面定义的2种格式中选择其一
var menuskin = "skin0";
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = false;

function showmenuie5() {
//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置
var event=arguments[0] || window.event;
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() {
//隐藏菜单
//很简单，设置visibility为hidden就OK！
ie5menu.style.visibility = "hidden";
}

function highlightie5(evt) {
//高亮度鼠标经过的菜单条项目

//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "highlight";
element.style.color = "white";

//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
}
}

function lowlightie5(evt) {
//恢复菜单条项目的正常显示
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == "menuitems") {
element.style.backgroundColor = "";
element.style.color = "black";
//window.status = "";
}
}

//右键下拉菜单功能跳转
function jumptoie5(evt) {
//转到新的链接位置
var event=evt || window.event;
var element=event.srcElement || event.target;
//var seltext=window.document.selection.createRange().text
if (element.className == "menuitems") {
//如果存在打开链接的目标窗口，就在那个窗口中打开链接
if (element.getAttribute("target") != null)
{
window.open(element.getAttribute("url"), element.getAttribute("target"));
}
else
//否则，在当前窗口打开链接
window.location = element.getAttribute("url");
}
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<P>点击右键看看效果-<A href="http://www.7dspace.com/" target=_blank>七度空间网页教学网</A>
</P></CENTER>
<br>
<b id="test">点击右键看看效果</b>
<br>
<br>
<br>
<b id="test1">点击右键看看效果</b>

<SCRIPT language=JavaScript1.2>
//如果当前浏览器是Internet Explorer，document.all就返回真

//选择菜单方块的显示样式
//ie5menu=document.getElementById("ie5menu");
ie5menu.className = menuskin;

//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.getElementById("test").oncontextmenu = showmenuie5;
document.getElementById("test1").oncontextmenu = showmenuie5;

//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;

</SCRIPT>
</BODY></HTML>