在网上找了很多,发现大部分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\" oncontextmenu=\"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 onclick="menuAdd()" id="menuRecipientId">新增</li>//自定义菜单栏,想要多几个,添加几个li标签
</ul>
</div>
点击右键,在点击新增就进入自定义方法menuadd()了