JavaScript模仿Windows体系右键菜单代码

发布时间：2018-08-23 03:04:07 所属栏目：创业来源：站长网

导读：Java Script模仿Windows体系右键菜单代码，对付JS初学者来说实现起来较量坚苦，假如是好手的话，技能上就没什么难的了，就是界说一个潜匿的box。当触发上下文变乱时表现它，当单击body恣意处时又潜匿它。此类菜单平常，各人应该见到过。演示： !DOCTYPE h

　　JavaScript模仿Windows体系右键菜单代码，对付JS初学者来说实现起来较量坚苦，假如是好手的话，技能上就没什么难的了，就是界说一个潜匿的box。当触发上下文变乱时表现它，当单击body恣意处时又潜匿它。此类菜单平常，各人应该见到过。

　　演示：

<!DOCTYPE html> <html> <head> <title>Js 模仿Windows右键菜单代码 - 猛火学院 Liehuo.NEt</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) {//打消变乱默认举措 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 id="wrap"> <p>单击右键看结果~</p> <ul id="menu"> <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><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><a href="http://www.veryhuo.com/help/guanyu.html">关于猛火网</a></li> <li class="no"><a href="#">封锁</a></li> </ul> </div> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如