Currently, many right-click menus circulating on the Internet do not support XHTML, mainly because of the differences between document.body and document.documentElement.
Another thing is that many right-click menu programs are too big, so I wrote a mini right-click menu that supports IE and Firefox.
If you need to introduce external Js, you need to refresh to execute <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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
