Code Demo:
<! DOCTYPE html> <ptml> <pead> <meta charset= "Utf-8"/> <title> Untitled document </title> <style& Gt <!--body{background: #222; font:14px ' Microsoft Yahei ', Arial; ul,li{list-style:none;padding:0;margin:0;} A{text-decoration:none;color: #000;} #wrap {width:800px; height:550px; border:1px solid #FF9C00; Background: #F0E6AF; position:relative; margin:. 5em auto; #wrap ul {background: #eee; border:1px solid #999; width:150px; Position:absolute; Display:none; -moz-box-shadow:3px 3px 9px #999; -webkit-box-shadow:3px 3px 9px #999; -o-box-shadow:3px 3px 9px #999; box-shadow:3px 3px 9px #999; #wrap ul li {border-bottom:1px solid #ddd; line-height:24px; } #wrap li.no {border-bottom:none} #wrap ul Li a {display:block; Padding-left:. 5em; #wrap ul li a:hover {background-color: #FFBD00; }--> </style> <script type= "Text/javascript" >//<! [cdata[function $ (ID) {return documenT.getelementbyid (ID); }; var eventunit = {addhandler:function (element, type, handler) {//Add event handler if (Element.addeventlistener) {Element.addev Entlistener (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) {//Cancel event default action 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> </pead> <body> <div id= "wrap" > <p> right-click to see Effect ~</p> <ul id= "Me Nu "> <li> undo </li> <li> Redo </li> <li> copy </li> <li> paste </li> <li> Capitalization conversion </li> <li> return </li> <li> spell check </li> <li> new </li> <li> Custom </li > <li> Graphics Options </li> <li class= "No" > off </li> </ul> </div> </body> </HTML&G T
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Structure:
Copy Code code as follows:
<div id= "Wrap" >
<ul id= "Menu" >
<li><a href= "" > Undo </a></li>
<li><a href= "" > Redo </a></li>
<li><a href= "" > Replication </a></li>
<li><a href= "" > Paste </a></li>
<li><a href= "" > Case Conversion </a></li>
<li><a href= "" > Return </a></li>
<li><a href= "" > Spell check </a></li>
<li><a href= "" > New </a></li>
<li><a href= "" > Custom </a></li>
<li><a href= "" > Graphics Options </a></li>
<li class= "No" ><a href= "" > Close </a></li>
</ul>
</div>
The code is this:
Copy Code code as follows:
function $ (ID) {
return document.getElementById (ID);
};
var eventunit = {
Addhandler:function (element, type, handler) {//Add an event 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) {//Cancel events default action
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;
});
});
