做了个需求的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