현재 인터넷에 유통되는 많은 오른쪽 클릭 메뉴는 XHTML을 지원하지 않습니다. 주로 document.body와 document.documentElement의 차이 때문입니다.
또 다른 점은 오른쪽 클릭 메뉴 프로그램이 너무 크다는 점입니다. 그래서 IE와 Firefox를 지원하는 미니 오른쪽 클릭 메뉴를 작성했습니다.
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script>
/**
*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]
+"";
}
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>]<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>
