suchen

Heim  >  Artikel  >  Web-Frontend  >  Zwei Beispiele für benutzerdefinierte Rechtsklick-Menüs, die in JS_Javascript-Kenntnissen implementiert sind

Zwei Beispiele für benutzerdefinierte Rechtsklick-Menüs, die in JS_Javascript-Kenntnissen implementiert sind

WBOY
WBOYOriginal
2016-05-16 15:41:111097Durchsuche

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:

Code kopieren Der 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程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung des JavaScript-Objektlernens_Javascript-FähigkeitenNächster Artikel：Zusammenfassung des JavaScript-Objektlernens_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen