答1：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menu{ cursor: hand;?
display: none;?
position: absolute;?
top: 0; left: 0;?
overflow: hidden;
background-color: "#CFCFCF";?
border: "1 solid";?
border-top-color: "#EFEFEF";?
border-left-color: "#EFEFEF";?
border-right-color: "#505050";?
border-bottom-color: "#505050";?
font: 10pt 宋體;
margin:0pt;padding: 2pt
}
?
.menu SPAN {width: 100%; cursor: hand; padding-left: 10pt}
.menu SPAN.selected {background: navy; color:white; cursor: hand}
</style>
?
<xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="后退……"/>
<item id="meng" value="訪問【孟憲會之精彩世界】"/>
<item id="calculate" value="執行 JavaScript 代碼"/>
</contextmenu>
<contextmenu id="demob">
<item id="菜單項例子1" value="菜單項例子1" />
<item id="菜單項例子2" value="菜單項例子2" />
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// 定義全局變量
var bContextKey=false;
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}
?
function fnDetermine(){
oWorkItem=event.srcElement;
//鍵盤上的菜單鍵被按下時。
if(bContextKey==true){
//如果菜單的“狀態”為“false”
if(oContextMenu.getAttribute("status")=="false"){
//捕獲鼠標事件，以便和頁面交互。
oContextMenu.setCapture();
//根據鼠標位置，確定菜單位置。
oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;
oContextMenu.innerHTML="";
?
//設定菜單的“狀態”為“true”
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnValue=false;
}
else
event.returnValue=true
}
}
else{
// 如果鍵盤菜單鍵沒有按下，并且菜單的“狀態”為“true”。
if(oContextMenu.getAttribute("status")=="true"){
if((oWorkItem.parentElement.id=="oContextMenu") && (oWorkItem.getAttribute("component")=="menuitem"))
{
fnFireContext(oWorkItem)
}
// 當鼠標離開菜單或單擊菜單項后，重設菜單（隱藏）?
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnValue=false;
}
}
}
function fnPopulate(sID)
{
var str=""
var elMenuRoot =?
document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]'
)
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' + elMenuRoot.childNodes[i].getAttribute("id") +'" id=oMenuItem' + i + '>' + elMenuRoot.childNodes[i].getAttribute("value") + "</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight?
}
}
?
function fnChirpOn(){
if((event.clientX>0) &&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight))
{
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0) && (event.clientY>0) && (event.clientX<document.body.offsetWidth) &&(event.clientY<document.body.offsetHeight))
{
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}
?
function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=180;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;?
//設置菜單樣式?
document.oncontextmenu=fnSuppress;
}
}
?
function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}
?
function fnSuppress(){
if (!(fnInContext(event.srcElement))) {?
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}
?
function javameng(){
window.open("}
?
function fnFireContext(oItem) {?
// 自定義上下文菜單項的功能
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "meng":
location.href="break;
case "calculate":
javameng()
break;
default:
alert("你點擊的菜單項是:\n\n\n" + oItem.menuid +"啊！！！")
}
}
</SCRIPT>
?
<BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc">
<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>這里放你任意的其他的東西！ ...<br>... 這里放你任意的其他的東西！ ...<br>... 這里放你任意的其他的東西！ ...<br><br>
<P contextmenu="demo">這里是利用上下文菜單的里子！你把鼠標移動到這里，然后單擊鼠標又鍵，可以看到菜單內容！<br>這里是利用上下文菜單的里子！你把鼠標移動到這里，然后單擊鼠標又鍵，可以看到菜單內容！<br>這里是利用上下文菜單的里子！你把鼠標移動到這里，然后單擊鼠標又鍵，可以看到菜單內容！<br>這里是利用上下文菜單的里子！你把鼠標移動到這里，然后單擊鼠標又鍵，可以看到菜單內容！<br>這里是利用上下文菜單的里子！你把鼠標移動到這里，然后單擊鼠標又鍵，可以看到菜單內容！<br></p><p>你也可以把鼠標放到下面的圖象上面，點擊又鍵！<p>
<center><IMG SRC="contextmenu="demob">
</body>
</html>
______________________________________________________________________________________________
答2：
<body>
<script language="javascript">
document.body.oncontextmenu=new Function('return false;');
</script>?
</body>
posted on 2007-03-22 11:54
圣域飛俠 閱讀(898)
評論(0) 編輯 收藏 所屬分類:
轉載