Das Beispiel in diesem Artikel beschreibt das in JS implementierte benutzerdefinierte Rechtsklickmenü. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Beispiel 1:
Screenshot des Laufeffekts:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="ajax.js"></script>
<style type="text/css">
#container {
text-align : center;
width : 500px;
height : 500px;
border : 1px solid blue;
margin : 0 auto;
}
.skin {
width : 100px;
border : 1px solid gray;
padding : 2px;
visibility : hidden;
position : absolute;
}
div.menuitems {
margin : 1px 0;
}
div.menuitems a {
text-decoration : none;
}
div.menuitems:hover {
background-color : #c0c0c0;
}
</style>
<script>
window.onload = function() {
var container = document.getElementById('container');
var menu = document.getElementById('menu');
/*显示菜单*/
function showMenu() {
var evt = window.event || arguments[0];
/*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
var rightedge = container.clientWidth-evt.clientX;
var bottomedge = container.clientHeight-evt.clientY;
/*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
else
/*否则,就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
/*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
else
/*否则,就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
/*设置菜单可见*/
menu.style.visibility = "visible";
LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);
}
/*隐藏菜单*/
function hideMenu() {
menu.style.visibility = 'hidden';
}
LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);
LTEvent.addListener(container,"contextmenu",showMenu);
LTEvent.addListener(document,"click",hideMenu);
}
</script>
</head>
<body>
<div id="menu" class="skin">
<div class="menuitems">
<a href="javascript:history.back();">后退</a>
</div>
<div class="menuitems">
<a href="javascript:history.back();">前进</a>
</div>
<hr>
<div class="menuitems">
<a href="" target="_blank">地图api</a>
</div>
<div class="menuitems">
<a href="" target="_blank">实时交通</a>
</div>
<div class="menuitems">
<a href="" target="_blank">地图搜索</a>
</div>
<div class="menuitems">
<a href="" target="_blank">驾驶导航</a>
</div>
<hr>
<div class="menuitems">
<a href="" target="_blank">灵图UU</a>
</div>
<div class="menuitems">
<a href="" target="_blank">路书下载</a>
</div>
<hr>
<div class="menuitems">
<a href="" target="_blank">关于本站</a>
</div>
<div class="menuitems">
<a href="" target="_bland">友情链接</a>
</div>
</div>
<div id="container">
<p>右键此区域</p>
</div>
</body>
</html>
Der ajax.js-Code lautet wie folgt:
var _LT_ajax_proxyXmlUrl="http://srvfree.api.51ditu.com/apisrv/p4x?";function LTNS(){LTNS.info={time:'Thu Jul 19 10:00:08 UTC 0800 2012',version: '1',ov:'1.3 Ver 20070705'};var w=function(uq){var iq=0,oq=0;var pq=uq.length;var aq=new String();var sq=-1 ;var dq=0;for(var fq=0;fq8f31c8f6be4068ff42303f8d20f832e2=97)?(gq-61):((gq>=65)?(gq-55):(gq-48))));oq=(oq38600841da254578b4fe5ed5db4d984e=8){var hq=oq>>(iq-8);if(dq>0){sq=(sq9e32312dab341bd505a65fd8d603fed2=224){sq=hq&(0xf);dq=2;}else if(hq>=128 ){sq=hq&(0x1f);dq=1;}else{aq =String.fromCharCode(hq);};};oq=oq-(hq1eecc99cd6219e2aaf17a7c0becb1af9 1){var uq=arguments[0]._LT_E_;for(var iq=0;iqa3d73a2ed2d9c1e6d4e72603eb0846cd=0; iq--){if(oq[iq]==yq){oq.splice(iq,1);break;};};}catch(pq){};oq=a.allEvents;for(var iq= oq.length-1;iq>=0;iq--){if(oq[iq]==yq){oq.splice(iq,1);break;};};while(yq.length>0) {yq.pop()};delete yq;};function b(yq,event){if(!yq||!yq._LT_E_){return;};var uq,iq=yq._LT_E_;for(var oq =iq.length-1;oq>=0;oq--){uq=iq[oq];if(!event||uq[1]==event){v(uq);};};}; function n(){var yq=a.allEvents;if(yq){for(var uq=yq.length-1;uq>=0;uq--){v(yq[uq]);};}; a.allEvents=null;};function m(yq,event,uq){if(d(yq)){try{if(yq.fireEvent){yq.fireEvent(q[16] event);};if( yq.dispatchEvent){var iq="mouseover,mouseout,mousemove,mousedown,mouseup,click,dbclick";var oq=o.createEvent("Event");oq.initEvent(event,false,true);yq.dispatchEvent (oq);};}catch(pq){alert('LTEvent.trigger error.');};}else{if(!uq){uq=[];};var aq=yq._LT_E_;if( aq&&aq.length>0){for(var sq=aq.length-1;sq>=0;sq--){var dq=aq[sq];if(dq&&dq[2]){if(dq[1] =="*"){dq[2].apply(yq,[event,uq]);};if(dq[1]==event){dq[2].apply(yq,uq);}; };};};};};function _(){return o.all?(o.readyState!="loading"&&o.readyState!=q[12]):(a.readyState==q[11] )};function Q(){if(!a.unLoadListener){a.unLoadListener=c(i,q[13],n);};if(!o.all&&!a.readyState){a.readyState= q[12];c(o,"DOMContentLoaded",function(){a.readyState=q[11];},true);};};yq(a,{getCallback:s,isHtmlControl:d,getObjWin: f,getWindowEvent:g,createAdapter:h,cancelBubble:j,returnTrue:k,bind:l,deposeNode:z,runOnceHandle:x,addListener:c,removeListener:v,clearListeners:b,clearAllListeners:n,trigger:m, isDocumentLoaded:_,load:Q});function W(yq,uq){var e=this;e[0]=yq?parseInt(yq):0;e[1]=uq?parseInt(uq):0 ;e.Longitude=e[0];e.Latitude=e[1];};yq(W.prototype,{getLongitude:function(){var e=this;return e[0];},getLatitude:function (){var e=this;return e[1];},setLongitude:function(yq){var e=this;e[0]=parseInt(yq);},setLatitude:function(yq){var e= this;e[1]=parseInt(yq);}});function E(yq){var e=this;e.win=yq?yq:i;};yq(E.prototype,{load:function(yq,uq,iq,oq){var e=this; if(!e.onLoadStart(yq)){return;};e.objName=oq?oq:"_OLR";var pq=e.win;pq[e.objName]=null;var uq=uq?uq: q[6];if(!e.jsFile){e.jsFile=pq.document.createElement(q[17]);e.jsFile.type=w("T6LuT2zgONPXSsDoQN1q");e.jsFile.defer=true; pq.document.body.insertBefore(e.jsFile,pq.document.body.firstChild);l(e.jsFile,"readystatechange",e,e.onReadyStateChange);l(e.jsFile,"load",e, e.onLoad);};e.jsFile.charset=uq;e.jsFile.src=yq;e.running=true;e.crypt=iq;},onLoadStart:function(yq){var e=this;m (e,"loadstart",[yq]);return true;},onLoad:function(yq){var e=this;var uq=e.win;if(uq[e.objName]){var iq=uq [e.objName];uq[e.objName]=null;m(e,q[10],[e.parseObject(iq)]);}else{m(e,q[9],[]); };if(!o.all&&e.jsFile&&e.jsFile.parentNode==uq.document.body){e.jsFile.removeAttribute("src");uq.document.body.removeChild(e.jsFile);delete e. jsFile;};e.running=false;},parseObject:function(yq){var e=this;if(e.crypt||yq.e){U(yq);};return yq;},onReadyStateChange: function(yq){var e=this;if(!e.jsFile||(e.jsFile.readyState!=q[10])){return;};e.onLoad();}});function R( yq,uq,iq,oq){var oq=oq?oq:i;var pq={url:yq,handle:uq,charset:iq,win:oq,classNum:1};var aq=I(oq) ;l(aq,q[10],pq,T);l(aq,q[9],pq,T);aq.load(yq,iq);};function T(yq){var e=this ;e.classNum--;if(yq&&yq._classUrls){var uq;while(uq=yq._classUrls.pop()){e.classNum ;R(uq,Y(e),e.charset,e.win );};};if(e.classNum==0){e.handle.apply(e);};};function Y(yq){return function(){yq.classNum--;if(yq. classNum==0){yq.handle.apply(yq);};};};function U(yq){var uq;if(yq.t){yq.t=A(yq.t);}; for(uq in yq.a){if(typeof yq.a[uq]==q[8]){yq.a[uq]=A(yq.a[uq]);};};for(uq in yq.c){if(typeof yq.c[uq]!=q[15]){U(yq.c[uq]);};};};function I(yq){var yq=yq? yq:i;var uq;if(!yq._LT_OLRS){yq._LT_OLRS=[];};for(var iq=0;iq212b9e212dce83a520fd85089c81d38f=2048){iq=(iqf47deb9c2941c83ff61d520a82202179>12)| 0xe0)cd4f2ab8d8c9cb9b6801fa7ddff9d35d>6)|0x80)21475f8b1e05121e43c526752b0a4ab4=128) {iq=(iq126d7f7135f91914b27a1ee4f6502eb9>6)|0xc0)37b9e224aaf9824009adc7387886e4a9=6){var dq=iq>>(uq-6);iq=iq-(dqf4cb80d0cd6d2f6d22e4a1313a6564ed0){var dq=iq53a3c7aba50d528b8017b1358aa80c36=97)?(fq-61):((fq>=65)?(fq-55):(fq-48))));iq=(iqed50e9cc97a2a9844c9626e105ecced6=8){var gq=iq>>(uq-8);if(sq>0){aq=(aq7e0ba109237761fa3376174a17c50189=224){aq=gq&(0xf);sq=2; }else if(gq>=128){aq=gq&(0x1f);sq=1;}else{pq.push(String.fromCharCode(gq));};};iq=iq-(gq13574fe9e1218a7fc09aed84fb1be1ed=3&&sqf48feaa3dc46c533bac1496b5e136ac4>2);uq+=tq.base64EncodeChars.charAt((pq&0x3)52b49197afb40047bf0477d92d8fe57a>2);uq+=tq.base64EncodeChars.charAt(((pq&0x3)408b8b85662479aa9ba70db56ec9c403>4));uq+=tq.base64EncodeChars.charAt((aq&0xF)a6b28099bbc31f0419a1093f8574fefe>2);uq+=tq.base64EncodeChars.charAt(((pq&0x3)408b8b85662479aa9ba70db56ec9c403>4));uq+=tq.base64EncodeChars.charAt(((aq&0xF)d13d4c1be51da1b1ff5923e1b2d680c4>6));uq+=tq.base64EncodeChars.charAt(sq&0x3F);};return uq;},base64decode:function(yq){var e=this;var uq,iq,oq,pq;var aq,sq,dq;sq=yq.length;aq=0;dq=q[7];while(aqd963434d6ab46415ffe03c32b93c1876>4));do{oq=yq.charCodeAt(aq++)&0xff;if(oq==61)return dq;oq=e.base64DecodeChars[oq];}while(aq469f551dc919de9f1ba18ae42aa22677>2));do{pq=yq.charCodeAt(aq++)&0xff;if(pq==61)return dq;pq=e.base64DecodeChars[pq];}while(aq4c03152a44d12f33f6ca74ada3a5df4f=0x0001)&&(pqf56a777fbf32c55985485f2cd2f46aac0x07FF){uq+=String.fromCharCode(0xE0|((pq>>12)&0x0F));uq+=String.fromCharCode(0x80|((pq>>6)&0x3F));uq+=String.fromCharCode(0x80|((pq>>0)&0x3F));}else{uq+=String.fromCharCode(0xC0|((pq>>6)&0x1F));uq+=String.fromCharCode(0x80|((pq>>0)&0x3F));};};return uq;},utf8to16:function(yq){var uq,iq,oq,pq;var aq,sq;uq=q[7];oq=yq.length;iq=0;while(iq6f48c085d7e851dc2dad4f2bdcff06e1>4){case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:uq+=yq.charAt(iq-1);break;case 12:case 13:aq=yq.charCodeAt(iq++);uq+=String.fromCharCode(((pq&0x1F)<<6)|(aq&0x3F));break;case 14:aq=yq.charCodeAt(iq++);sq=yq.charCodeAt(iq++);uq+=String.fromCharCode(((pq&0x0F)<<12)|((aq&0x3F)<<6)|((sq&0x3F)<<0));break;};};return uq;}});var p=function(a){var s=o.getElementsByTagName(q[17]);var d=new RegExp(a,"i");for(var f=0;f
示例2:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义右键菜单</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/24px arial;}
#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}
#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}
#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}
#menu li.active{background:#999;}
#menu li.active a{color:#fff;background:#8f8f8f;}
#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(images/ico.png) no-repeat;}
#menu li em.cur{background-position:0 0;}
#menu li em.copy{background-position:0 -24px;}
#menu li em.paste{background-position:0 -48px;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oMenu = document.getElementById("menu");
var aLi = oMenu.getElementsByTagName("li");
//加载后隐藏自定义右键菜单
oMenu.style.display = "none";
//菜单鼠标移入/移出样式
for (i = 0; i < aLi.length; i++)
{
//鼠标移入样式
aLi[i].onmouseover = function ()
{
this.className = "active"
};
//鼠标移出样式
aLi[i].onmouseout = function ()
{
this.className = ""
}
}
//自定义菜单
document.oncontextmenu = function (event)
{
var event = event || window.event;
var style = oMenu.style;
style.display = "block";
style.top = event.clientY + "px";
style.left = event.clientX + "px";
return false;
};
//页面点击后自定义菜单消失
document.onclick = function ()
{
oMenu.style.display = "none"
}
};
</script>
</head>
<body>
<center>自定义右键菜单,请在页面点击右键查看效果。</center>
<ul id="menu">
<li><em class="cut"></em><a href="javascript:;">剪切</a></li>
<li><em class="copy"></em><a href="javascript:;">复制</a></li>
<li><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>
</body>
</html>
完整实例代码点击此处本站下载。
希望本文所述对大家的javascript程序设计有所帮助。