鼠标右键点击弹出菜单（jQuery）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

禁用浏览器默认事件，此处是兼容写法

$(document).contextmenu(function (e) {
var event = e || window.event;
if (event.preventDefault) {
event.preventDefault(); // 防止浏览器默认行为(W3C)
} else {
event.returnValue = false; // IE中阻止浏览器行为
}
});

封装右键函数rightClickMouse（），也可将禁用默认浏览器事件封装到此函数中，由于我的项目中如果没有先选中列表项，就不会调用右键函数，因此首先全局禁用浏览器默认事件了~

右键菜单默认隐藏，相对于body绝对定位（absolute），z-index值尽量大，使其位于界面最上层，通过获取鼠标点击的位置来对菜单进行定位；

注意HTML中右键菜单的位置是body标签的子元素；

从后台获取列表数据并以无序列表显示，然后给li绑定点击事件。

此处有个坑：由于li是动态添加的节点，因此直接使用$('#itemList>li').click()是无效的！！！

//给点击的li标签绑定click事件,则只有选中相机列表时才可弹出右键菜单

$('#itemList').on('click', 'li', function () {
rightClickMouse('#cameraList>li', 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();
});
// 点击页面任意地方之后，右键菜单隐藏
$(document).click(function () {
$(".contextmenu").hide();
}); });
});