JavaScript模拟IE右键菜单
代码简介:
JavaScript模拟一个IE右键菜单,还没有屏蔽右键,这个相对简单,大家自己把IE固有的右键屏蔽掉吧。改制的右键风格尽量与系统右键一致,我觉得还行吧。
代码内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JavaScript模拟IE右键菜单_网页代码站(www.webdm.cn)</title> <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><span>撤销(U)</span><label>Ctrl+Z</label></li> <li class='u'disabled><span>重做(Z)</span><label>Ctrl+Y</label></li> <li><span>粘贴(P)</span><label>Ctrl+V</label></li> <li name="del"><span>删除(D)</span><label>></label></li> <li class='u'><span>选择(S)</span><label>></label></li> <li><span>格式(F)</span><label>></label></li> <li><span>大小写转换(N)</span><label>></label></li> <li><span>插入(I)</span><label>></label></li> <li><span>HTML(H)</span><label>></label></li> <li class='u'><span>其他(E)</span><label>></label></li> <li><span>换行符</span><label>></label></li> <li><span>拼写检查</span><label>></label></li> </ol> </div> <div class='menu' id='del'> <ol> <li><span>删除所选(D)</span><label>Ctrl+Z</label></li> <li><span>删除单词(W)</span><label>Ctrl+Y</label></li> <li><span>删除行(L)</span><label>Ctrl+V</label></li> <li><span>删除至单词结尾(E)</span></li> <li><span>删除至行尾(N)</span></li> <li class='u'><span>反向删除单词(O)</span></li> <li disabled><span>删除标记行</span></li> <li><span>删除空白行</span></li> <li><span>删除重复行</span></li> </ol> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p> 代码来自:http://www.webdm.cn/webcode/1c462166-0f0d-4702-8167-6af50990f1f1.html