jQuery简单的点击右键菜单处理数据，将点击的事件拿到并且右键选择处理方式

最新推荐文章于 2023-05-11 16:03:12 发布

人工智障阿门

最新推荐文章于 2023-05-11 16:03:12 发布

阅读量572

点赞数

分类专栏： jQuery 文章标签： html css js

本文链接：https://blog.csdn.net/Amen_Klam/article/details/112960768

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做了个需求的demo，感觉很多时候都用的上
页面右键自定义做的菜单可以做很多事情，目前做一个简单的获取内容并处理的事件

效果如下：
右键22222，会出现添加黑白名单菜单，点击黑名单，会弹出处理事件（能拿到点击框的信息）
在这里插入图片描述
上代码，html部分：

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

		/* 右键菜单样式 */
		.ToContextmenu {
			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 a:hover {
			background: #deecfd;
			border-left: 3px solid #5ecaf5;
		}

		.contextmenu li a {
			display: block;
			padding: 10px;
			color: #000000;
			text-decoration: none;
			border-left: 3px solid transparent;
			transition: ease 0.3s;
			cursor: pointer;
		}

		/* 右键菜单样式 end*/
	</style>
</head>

<body style="background: #2C3E50;">
<!-- 需要右键功能的列表 -->
	<div class="box">
		<div class="ToContextmenu">11111</div>
		<div class="ToContextmenu">22222</div>
		<div class="ToContextmenu">33333</div>
		<div class="ToContextmenu">44444</div>
		<div class="ToContextmenu">55555</div>
	</div>

	<!-- 右键菜单  默认是隐藏的 -->
	<div class="toshowcontext">
		<ul class="contextmenu">
			<li>
				<a>添加到白名单一级</a>
				<a>添加到黑名单一级</a>
			</li>
		</ul>
	</div>

</body>
</html>

jQuery处理部分（需要自己插入jQuery文件）：

	// 文档加载后激活函数
	$(document).ready(function() {
        // 鼠标右键事件
        //给脚本生成的元素添加事件，不用delegate的话会响应不了
		$(".box").delegate(".ToContextmenu","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";
            };
            // 获取点击位置的内容信息
            var contextmenu_txt=$(this).text();
			// 给右键菜单功能赋值
            $(".contextmenu li a").eq(0).attr('onclick','toWhite('+ contextmenu_txt+')')
            $(".contextmenu li a").eq(1).attr('onclick','toBlack('+ contextmenu_txt+')')
            
			// ul菜单出现
			$(".contextmenu").css({
				"left": menuLeft,
				"top": menuTop
			}).show();
			// 阻止浏览器默认的右键菜单事件
			return false;
		});
		// 点击之后，右键菜单隐藏
		$(document).click(function() {
			$(".contextmenu").hide();
        });
        
    });

    // 将获取的信息添加到菜单，设置菜单事件
    function toWhite(obj){
      alert('已添加'+obj+'到白名单！')          //事件内容     
    }
    function toBlack(obj){
      alert('已添加'+obj+'到黑名单！')           //事件内容    
    }

完整代码复制可以直接运行，菜单的弹出边框位置还需要根据你的边框，页面大小去调整
我这边是固定窗口的，所以会根据窗口来识别距离和高度。

希望能帮助大家的工作，有用就点个赞吧:-D

人工智障阿门

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单的点击右键菜单处理数据，将点击的事件拿到并且右键选择处理方式

做了个需求的demo，感觉很多时候都用的上页面右键自定义做的菜单可以做很多事情，目前做一个简单的获取内容并处理的事件效果如下：右键22222，会出现添加黑白名单菜单，点击黑名单，会弹出处理事件（能拿到点击框的信息）上代码，html部分：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于jQuery鼠标右键菜单</title> <style
复制链接

扫一扫

专栏目录