您的位置：首页 > Web前端 > JavaScript

JS实现自定义右键菜单

2011-12-06 16:10 741 查看

转自这位仁兄的文章：http://www.cnblogs.com/snandy/archive/2011/03/09/1977789.html

效果图：

<html>   
	<head>     
    	<title>JS实现自定义右键菜单</title>
        <meta http-equiv="content-type" content="text/html; charset=gbk">
        <script src="http://api.51ditu.com/js/ajax.js"></script>
        <style type="text/css">
			#container {
				text-align:center;
				width : 800px;
				height : 800px;
				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:add(event);">添加链接</a></div>
                <hr>
                <div class="menuitems"><a href="javascript:returnValue();">关闭链接</a></div>
            </div>
            <div id="container"><p>右键此区域</p></div>
      </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航