鼠标点击右键出现菜单栏（可供前后端交互）

在网上找了很多，发现大部分jqurey的点击右键出现菜单不能和后端进行友好的交互。后面发现一款很简单但是很实用的供前后端交互的一条原始代码。这是我学习的大佬地址：大佬的链接

废话不多说，贴代码了。

首先是样式。很简陋，要前端帮你调漂亮点吧。

* {
	margin: 0;
	padding: 0;
}

#menu {
	position: absolute;
	width: 150px;
	visibility: hidden;
	border: 1px solid #666;
	border-bottom-width: 0;
}

#menu li {
	list-style: none;
	text-indent: 1em;
}

#menu li a {
	display: block;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid #666;
	text-decoration: none;
	color: #666;
	font: 12px/30px tahoma;
}

#menu li a:hover {
	background: #eee;
	color: black;
}

这个是个ajax生成的一列数据，然后div这里加个oncontextmenu事件（就是右键点击事件）

$.ajax({
	type:"post",
	url:"/oa/chat/viewGroupList",
	dataType:"json",
	success:function(data){
	    $(".chatBox-list").empty();
	    var li = "";
	    var chat = null;
	    $.each(data,function(index,po){
		li+="<div class=\"chat-list-people demo1\" οncοntextmenu=\"aaa()\">"//这里是右键点击事件。
			+"<div>"
			+"<img src=\""+po.USER_IMG+"\" alt=\"头像\" />"
			+"</div>"
			+"<div class=\"chat-name\">"
			+"<p>"+po.USER_NAME+notFriend+"</p>"
			+"</div>"
			+chatFlag
			+"</div>";
	    })
	    $(".chatBox-list").append(li);
	    $(".chat-message-num").html(chat);
	}
})

点击右键触发aaa()事件

function aaa(e) {
	document.oncontextmenu = function() {//这里是屏蔽浏览器的右键菜单
		return false;
	}
	if (window.event)
		var e = window.event;
	var mymenu = document.getElementById("menu");//这里是自定义菜单栏
	mymenu.style.visibility = "visible";
	mymenu.style.left = e.clientX + 5 + "px";
	mymenu.style.top = e.clientY + 5 + "px";
	return false;
	}
	document.onclick = function() {//这里是在页面点击后执行的方法
		document.oncontextmenu = function() {//点击后在别的地方又可以右键点击出现浏览器菜单
			return true;
		}
		var mymenu = document.getElementById("menu");
		mymenu.style.visibility = "hidden";//隐藏自定义菜单栏
	}

这个div里面的li标签是显示的自定义菜单栏。需要的多加几个li标签

	<!--右键菜单的源-->
	<div id="menu">
		<ul>
			<li οnclick="menuAdd()" id="menuRecipientId">新增</li>//自定义菜单栏，想要多几个，添加几个li标签
		</ul>
	</div>

点击右键，在点击新增就进入自定义方法menuadd()了