右击显示菜单

最新推荐文章于 2023-08-31 20:58:22 发布

ITDragon龙

最新推荐文章于 2023-08-31 20:58:22 发布

阅读量6k

点赞数 2

分类专栏： javascript 文章标签： Jquery 菜单

本文链接：https://blog.csdn.net/qq_19558705/article/details/50364650

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

效果图：

第一步：做一个菜单

第二步：通过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>
	<!--导入jquery类库-->
	<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://www.itit123.cn/

ITDragon龙

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
右击显示菜单

自定义右击菜单，很棒的效果效果图：第一步：做一个菜单第二步：通过js屏蔽浏览器鼠标右击第三步：获取鼠标点击的x,y；与菜单的长宽，浏览器长和宽比较，第四步：定位显示参考下面代码，亲测可用：右击鼠标 *{margin:0;padding:0;} body{font-
复制链接

扫一扫