JS实现的自定义右键菜单实例二则

前端技术 2023/09/04 JavaScript

本文实例讲述了JS实现的自定义右键菜单。分享给大家供大家参考。具体如下：

示例1：

运行效果截图：

具体代码如下：

<!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>

其中ajax.js代码如下：

本站下载。

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11642

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案