页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

一个轻量级的XHTML右键菜单[支持IE和firefox]

发布：dxy 字体：[增加减小] 类型：转载

目前很多在网络上流传的右键菜单都不支持XHTML，主要就是因为document.body和document.documentElement之间的不同造成的
还有一个就是很多右键菜单程序太大，于是自己写了一个迷你型的右键菜单，支持IE和firefox

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

#rightMenu{

padding:2px;

background-color:menu;

cursor:default;

position:absolute;

z-index:900;

border-right:1px solid #aaa;

border-bottom:1px solid #aaa;

border-top:1px solid #fff;

border-left:1px solid #fff;

font-size:14px;

word-break:keep-all;

}

.menuItem{

display:block;

padding:3px;

}

</style>

/**

*JRightMenu类，在浏览器里显示用户定制右键菜单

*[注意]：只适用于XHTML

*@author brull

*@email brull@163.com

*@date 2007-01-24

/**

*@param menuItem 菜单显示内容，是一个数组

*@param handle 对应menuItem菜单的处理js代码段，同样是个数组

JRightMenu=function (menuItem,handle){

var rightMenu=document.createElement("div");

var menuInnerHTML="";//菜单容器里的HTML内容

var $items=this.menuItem=menuItem;

var $handle=this.handle=handle;

rightMenu.id="rightMenu";//id

for(var i in $items){

if($items[i].indexOf("<hr")!=-1)

menuInnerHTML+=$items[i];

else

menuInnerHTML+="<span class=’menuItem’ onmouseover=’this.style.backgroundColor=\"#3e80ca\";window.status=this.innerHTML;’ onmouseout=’this.style.backgroundColor=\"\";window.status=\"\"’ onclick=\""+handle[i]+"\" >"

+$items[i]

+"</span>";

}

rightMenu.innerHTML=menuInnerHTML;

rightMenu.style.visibility = "visible";

rightMenu.onmousedown=function(e){

e=e||window.event;

document.all?e.cancelBubble=true:e.stopPropagation();

}

rightMenu.onselectstart=function(){

return false;

}

document.body.appendChild(rightMenu);

this.menu=rightMenu;//方便别的方法引用

};

JRightMenu.prototype.show=function(e){

e=e||window.event;

var root=document.documentElement;

var x = root.scrollLeft+e.clientX;//菜单左上角横坐标

var y = root.scrollTop+e.clientY;//菜单左上角纵坐标

if (this.menu.clientWidth+e.clientX > root.clientWidth){

x=x-this.menu.clientWidth;

}

if (this.menu.clientHeight+e.clientY > root.clientHeight){

y=y-this.menu.clientHeight;

}

this.menu.style.left = x+"px";

this.menu.style.top = y+"px";

this.menu.style.visibility = "visible";

return false;

}

JRightMenu.prototype.hidden=function() {

this.menu.style.visibility = "hidden";

}

</script>

window.onload=function(){

rightMenu=new JRightMenu(["it’s mine!","it’s yours!"],["alert(’it is mine!’)","alert(’it is yours!’)"]);

}

document.oncontextmenu=function(evt){return rightMenu.show(evt);};

document.onclick=function(){rightMenu.hidden();}

</script>

</head>

<body>

adadad大王大王

adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王

awdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

</body>

</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：一个轻量级的XHTML右键菜单[支持IE和firefox]