一個輕量級的XHTML右鍵菜單[支持IE和firefox]

2019-11-21 02:18:39

字體：大中小

來源：轉載

供稿：網友

目前很多在網絡上流傳的右鍵菜單都不支持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"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>adad</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><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><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 id="iwvjtn8m0" 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></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 全選注:如需引入外部Js需刷新才能執行]

上一篇：一些易混淆且不常用的屬性，希望有用

下一篇：疊加計算出錯的解決方法