右击显示菜单

亦凉 2022-08-18 12:23 131阅读 0赞

自定义右击菜单，很棒的效果

效果图：

![20151119211222596][]

第一步：做一个菜单

第二步：通过js屏蔽浏览器鼠标右击

第三步：获取鼠标点击的x,y；与菜单的长宽，浏览器长和宽比较，

第四步：定位显示

参考下面代码，亲测可用：

<!doctype html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
    		<title>右击鼠标</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			body{font-family:"微软雅黑";font-size:16px;background:#666; color:#666;}
    			.menu{width:155px;background:#fff;box-shadow:1px 1px 30px #ccc;display:none;
    				position:absolute;}
    			.menu ul li{list-style:none;line-height:35px;padding-left:16px;
    				border-bottom:1px solid #ddd;}
    			.menu ul li:hover{background:#647E7C;color:#fff;}
    		</style>
    	
    	<script type = "text/javascript" src = "js/jquery-1.11.1.min.js"></script>
    	</head>
    	<body>
    		<div class = "menu">
    			<ul>
    				<li onclick = "jy_menu(0)">打开</li>
    				<li onclick = "jy_menu(1)">刷新(R)</li>
    				<li onclick = "jy_menu(2)">复制(C)</li>
    				<li onclick = "jy_menu(3)">粘贴(V)</li>
    				<li onclick = "jy_menu(4)">注销</li>
    			</ul>
    		</div>
    	<script type = "text/javascript">
    		//首先屏蔽到浏览器自带的右键功能
    		document.oncontextmenu = function(){
    			return false;
    		};
    		//点击鼠标三键
    		$(document).mousedown(function(e){
    			//1是左键；2是中间键；3是右键
    			var key = e.which;
    			if(key == 3){
    				var x = e.clientX; //x坐标
    				var y = e.clientY; //y坐标
    				//获取menu的长宽
    				var menuHeight = $(".menu").height();
    				var menuWidth = $(".menu").width();
    				//获取浏览器的可见长宽
    				var clintHeight = getClientHeight();
    				var clintWidth = getClientWidth();
    				//判断
    				if(menuHeight + y >= clintHeight){
    					y = clintHeight - menuHeight - 8;
    				}
    				if(menuWidth + x >= clintWidth){
    					x = clintWidth - menuWidth - 8;
    				}
    				//之前必须要绝对定位才行
    				$(".menu").show().css({left:x,top:y});
    
    			}
    		});
    
    		//点击空白隐藏鼠标右键
    		$(document).click(function(){
    			$(".menu").hide();
    		});
    
    		//响应事件
    		function jy_menu(i){
    		switch(i){
    			case 0:
    			  alert("这是打开操作");break;
    			case 1:
    			  alert("这是刷新操作");break;
    			case 2:
    			  alert("这是复制操作");break;
    			case 3:
    			  alert("这是粘贴操作");break;
    			default:
    			  alert("这是注销操作");
    			}
    		}
    		// 浏览器的可见高度
    		function getClientHeight() {
    			var clientHeight = 0;
    			if (document.body.clientHeight && document.documentElement.clientHeight) {
    				clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
    			} else {
    				clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
    			}
    			return clientHeight;
    		}
    
    		// 浏览器的可见宽度
    		function getClientWidth() {
    			var clientWidth = 0;
    			if (document.body.clientWidth && document.documentElement.clientWidth) {
    				clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
    			} else {
    				clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
    			}
    			return clientWidth;
    		}
    	</script>
    	</body>
    </html>

只需要使用自己的Jquery文件即可，不需要添加其他内容。

转载请注明来源：[http://blog.csdn.net/qq\_19558705/article/details/49851879][http_blog.csdn.net_qq_19558705_article_details_49851879]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[20151119211222596]: /images/20220731/c0249139353f4962a4531e3f9cd4065b.png
[http_blog.csdn.net_qq_19558705_article_details_49851879]: http://blog.csdn.net/qq_19558705/article/details/49851879
[http_www.itit123.cn]: http://www.itit123.cn/