JavaScript模拟IE右键菜单

2024-09-05 12:20:45

字体：大中小

来源：转载

供稿：网友

JavaScript模拟一个IE右键菜单，还没有屏蔽右键，这个相对简单，大家自己把IE固有的右键屏蔽掉吧。改制的右键风格尽量与系统右键一致，我觉得还行吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>模拟IE右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{ margin:0; padding:0; } .menu{ width:170px; display:none; position:absolute; background-color:#FCFDE1; cursor:default; } ol{ list-style:none; width:170px; font-size:13px; border:1px #aaa solid; padding:0px 3px; } ol li{ padding:4px 20px; text-align:right; } span{ float:left; } .u{ border-bottom:1px #aaa solid; } #over{ background-color:#0033FF; color:white; } </style> <script type="text/javascript"> var left; var top; var flag; window.onload = function(){ document.onmouseup = mouseUpHandler; } function mouseUpHandler(e){ var evt = e || window.event; var oMenu = document.getElementById("menu"); oMenu.style.display = (oMenu.style.display != "block") ? "block":"none"; oMenu.style.left = left = evt.clientX; oMenu.style.top = top = evt.clientY; var oLis = oMenu.getElementsByTagName('li'); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover = mouseOverHandler; oLis[i].onmouseout = mouseOutHandler; } } function mouseOverHandler(e){ var _this = this; this.id = 'over'; if(this.name == 'del'){ var oDel = document.getElementById("del"); oDel.style.display = 'block'; oDel.style.left = left + this.offsetWidth; oDel.style.top = top + this.offsetTop; oDel.onmouseover = function(){ _this.id = 'over'; this.style.display = 'block'; } oDel.onmouseout = function(){ this.style.display = 'none'; _this.id = ''; } var oLis = oDel.getElementsByTagName('li'); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover = mouseOverHandler; oLis[i].onmouseout = mouseOutHandler; oLis[i].onclick = function(){ oDel.style.display = 'none'; } } } } function mouseOutHandler(e){ if(flag)return false; this.id = ''; if(this.name == 'del'){ var oDel = document.getElementById("del"); oDel.style.display = 'none'; } } </script></head><body> <div class='menu' id='menu'> <ol> <li>撤销(U)<label>Ctrl+Z</label></li> <li class='u'disabled>重做(Z)<label>Ctrl+Y</label></li> <li>粘贴(P)<label>Ctrl+V</label></li> <li name="del">删除(D)<label>></label></li> <li class='u'>选择(S)<label>></label></li> <li>格式(F)<label>></label></li> <li>大小写转换(N)<label>></label></li> <li>插入(I)<label>></label></li> <li>HTML(H)<label>></label></li> <li class='u'>其他(E)<label>></label></li> <li>换行符<label>></label></li> <li>拼写检查<label>></label></li> </ol> </div> <div class='menu' id='del'> <ol> <li>删除所选(D)<label>Ctrl+Z</label></li> <li>删除单词(W)<label>Ctrl+Y</label></li> <li>删除行(L)<label>Ctrl+V</label></li> <li>删除至单词结尾(E)</li> <li>删除至行尾(N)</li> <li class='u'>反向删除单词(O)</li> <li disabled>删除标记行</li> <li>删除空白行</li> <li>删除重复行</li> </ol> </div></body></html>

上一篇：简易实用，CSS+Js滑动门菜单

下一篇：jQuery动态滑动菜单代码，常用于博客