基于jQuery的鼠标右键菜单

喜欢ヅ旅行 2021-09-15 12:02 504阅读 0赞

对于自制的鼠标右键功能，我们应该考虑哪些因素呢？

一、涉及因素

> 1、阻止默认鼠标右键事件。
> 
> 3、右键事件，使菜单出现。
> 
> 2、考虑右键菜单出现的位置，是否超出窗口。
> 
> 4、点击窗口任意位置，菜单消失。

二、具体代码及分析如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>基于jQuery鼠标右键菜单</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				font-family: "微软雅黑";
    				box-sizing: border-box;
    				list-style: none;
    			}
    			
    			h2 {
    				margin: 100px auto;
    				width: 500px;
    				padding: 20px;
    				font-size: 30px;
    				letter-spacing: 10px;
    				color: #FFFFFF;
    				text-align: center;
    				border-top: 3px solid #d56f22;
    				border-bottom: 3px solid #d56f22;
    				border-radius: 10px;
    			}
    			
    			.contextmenu {
    				display: none;
    				position: absolute;
    				width: 200px;
    				background: #FFFFFF;
    				border-radius: 5px;
    				overflow: hidden;
    				z-index: 99;
    			}
    			
    			.contextmenu li {
    				border-left: 3px solid transparent;
    				transition: ease 0.3s;
    			}
    			
    			.contextmenu li:hover {
    				background: #CE93D8;
    				border-left: 3px solid #9C27B0;
    			}
    			
    			.contextmenu li a {
    				display: block;
    				padding: 10px;
    				color: #000000;
    				text-decoration: none;
    				transition: ease 0.3s;
    			}
    			
    			.contextmenu li:hover a {
    				color: #FF0000;
    			}
    		</style>
    	</head>
    
    	<body style="background: #2C3E50;">
    		<h2>提示：鼠标右键点击</h1>
    		<ul class="contextmenu">
    			<li>
    				<a href="">百度</a>
    			</li>
    			<li>
    				<a href="#">搜狐</a>
    			</li>
    			<li>
    				<a href="#">搜狗</a>
    			</li>
    			<li>
    				<a href="#">必应</a>
    			</li>
    			<li>
    				<a href="#">网易</a>
    			</li>
    		</ul>
    	</body>
    
    </html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	// 文档加载后激活函数
    	$(document).ready(function() {
    		// 鼠标右键事件
    		$(document).contextmenu(function(e) {
    			// 获取窗口尺寸
    			var winWidth = $(document).width();
    			var winHeight = $(document).height();
    			// 鼠标点击位置坐标
    			var mouseX = e.pageX;
    			var mouseY = e.pageY;
    			// ul标签的宽高
    			var menuWidth = $(".contextmenu").width();
    			var menuHeight = $(".contextmenu").height();
    			// 最小边缘margin(具体窗口边缘最小的距离)
    			var minEdgeMargin = 10;
    			// 以下判断用于检测ul标签出现的地方是否超出窗口范围
    			// 第一种情况：右下角超出窗口
    			if(mouseX + menuWidth + minEdgeMargin >= winWidth &&
    				mouseY + menuHeight + minEdgeMargin >= winHeight) {
    				menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
    				menuTop = mouseY - menuHeight - minEdgeMargin + "px";
    			}
    			// 第二种情况：右边超出窗口
    			else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {
    				menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
    				menuTop = mouseY + minEdgeMargin + "px";
    			}
    			// 第三种情况：下边超出窗口
    			else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {
    				menuLeft = mouseX + minEdgeMargin + "px";
    				menuTop = mouseY - menuHeight - minEdgeMargin + "px";
    			}
    			// 其他情况：未超出窗口
    			else {
    				menuLeft = mouseX + minEdgeMargin + "px";
    				menuTop = mouseY + minEdgeMargin + "px";
    			};
    			// ul菜单出现
    			$(".contextmenu").css({
    				"left": menuLeft,
    				"top": menuTop
    			}).show();
    			// 阻止浏览器默认的右键菜单事件
    			return false;
    		});
    		// 点击之后，右键菜单隐藏
    		$(document).click(function() {
    			$(".contextmenu").hide();
    		});
    	});
    </script>

三、效果图

![20180527193853744][]

[20180527193853744]: /images/20210802/b70d6eaddf2845678116470f57689600.png