Simulate windows context menu

Technically, there is no difficulty in defining a hidden box. It is displayed when a context event is triggered and hidden when you click any part of the body. The style effect is rough. Please forgive me ~~~

Here is the Demo.

Structure:

View Code

1 <div id = "wrap">
2 <ul id = "menu">
3 <li> <a href = ""> undo </a> </li>
4 <li> <a href = ""> redo </a> </li>
5 <li> <a href = ""> copy </a> </li>
6 <li> <a href = ""> paste </a> </li>
7 <li> <a href = ""> case sensitivity </a> </li>
8 <li> <a href = ""> press ENTER </a> </li>
9 <li> <a href = ""> spelling check </a> </li>
10 <li> <a href = ""> New </a> </li>
11 <li> <a href = ""> Custom </a> </li>
12 <li> <a href = ""> graphic options </a> </li>
13 <li class = "no"> <a href = ""> close </a> </li>
14 </ul>
15 </div>

The code is as follows:

Function $ (id) {return document. getElementById (id) ;}; var EventUnit = {addHandler: function (element, type, handler) {// Add the 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 the default event action if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}} EventUnit. addHandler (window, 'load', function () {var wrap = $ ('wrapp'); 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, 'textmenu ', 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 ;});});