模擬windows平臺的上下文菜單效果代碼

更新時間：2011年03月10日 23:27:55 作者：

技術(shù)上沒什么難的，就是定義一個隱藏的box，當(dāng)觸發(fā)上下文事件時顯示它，當(dāng)單擊body任意處時又隱藏它。

代碼演示：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無標(biāo)題文檔</title> <style>  </style> <script type="text/javascript"> //<![CDATA[ function $(id) { return document.getElementById(id); }; var EventUnit = { addHandler: function(element, type, handler) {//添加事件處理程序 if(element.addEventListener) { element.addEventListener(type, handler, false); } else if(element.attachEvent) { element.attachEvent('on' + type, handler); } else { element['on' + type] = handler; }; }, getEvent: function(event) { return event ? event : window.event; }, preventDefault: function(event) {//取消事件默認(rèn)動作 if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }; } } EventUnit.addHandler(window, 'load', function() { var wrap = $('wrap'); var menu = $('menu'); var menuStyle = menu.style.display; var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; var w = 0, h = 0; var left = 0, top = 0; EventUnit.addHandler(wrap, 'contextmenu', function(event) { event = EventUnit.getEvent(event); EventUnit.preventDefault(event); menu.style.display = 'block'; w = menu.clientWidth; h = menu.clientHeight; left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; menu.style.left = left + 'px'; menu.style.top = top + 'px'; }); EventUnit.addHandler(document, 'click', function() { menu.style.display = menuStyle; }); }); //]]> </script> </head> <body> <div   class="vjr77rz"   id="wrap"> <p>單擊右鍵看效果~</p> <ul id="menu"> <li><a href="">撤銷</a></li> <li><a href="">重做</a></li> <li><a href="">復(fù)制</a></li> <li><a href="">粘貼</a></li> <li><a href="">大小寫轉(zhuǎn)換</a></li> <li><a href="">回車</a></li> <li><a href="">拼寫檢查</a></li> <li><a href="">新建</a></li> <li><a href="">自定義</a></li> <li><a href="">圖形選項</a></li> <li id="jzvfxzt"    class="no"><a href="">關(guān)閉</a></li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

結(jié)構(gòu)：

復(fù)制代碼代碼如下:

 
<div id="wrap"> 
<ul id="menu"> 
<li><a href="">撤銷</a></li> 
<li><a href="">重做</a></li> 
<li><a href="">復(fù)制</a></li> 
<li><a href="">粘貼</a></li> 
<li><a href="">大小寫轉(zhuǎn)換</a></li> 
<li><a href="">回車</a></li> 
<li><a href="">拼寫檢查</a></li> 
<li><a href="">新建</a></li> 
<li><a href="">自定義</a></li> 
<li><a href="">圖形選項</a></li> 
<li class="no"><a href="">關(guān)閉</a></li> 
</ul> 
</div> 

code是這樣：

復(fù)制代碼代碼如下:

 
function $(id) { 
return document.getElementById(id); 
}; 

var EventUnit = { 
addHandler: function(element, type, handler) {//添加事件處理程序 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else if(element.attachEvent) { 
element.attachEvent('on' + type, handler); 
} else { 
element['on' + type] = handler; 
}; 
}, 
getEvent: function(event) { 
return event ? event : window.event; 
}, 
preventDefault: function(event) {//取消事件默認(rèn)動作 
if(event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
}; 
} 
} 

EventUnit.addHandler(window, 'load', function() { 
var wrap = $('wrap'); 
var menu = $('menu'); 
var menuStyle = menu.style.display; 
var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; 
var w = 0, h = 0; 
var left = 0, top = 0; 

EventUnit.addHandler(wrap, 'contextmenu', function(event) { 
event = EventUnit.getEvent(event); 
EventUnit.preventDefault(event); 

menu.style.display = 'block'; 
w = menu.clientWidth; 
h = menu.clientHeight; 
left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; 
top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; 
menu.style.left = left + 'px'; 
menu.style.top = top + 'px'; 
}); 

EventUnit.addHandler(document, 'click', function() { 
menu.style.display = menuStyle; 
}); 
}); 