当用户在 <div> 元素 上右击鼠标时执行 JavaScript :
<div oncontextmenu="myFunction()" contextmenu="mymenu">
定义div的属性为hidden,当右键时显示菜单:
<div class="panel panel-default" style="position:absolute;display:none;z-index:999;padding:0;margin:0;line-height:0" id="rightmenu" oncontextmenu="hideThis(this);return false;">
<div class="panel-body" style="margin:0;padding:0;">
<input type="hidden" value="" id="rightmenu">
<ul class="nav nav-pills nav-stacked" >
<li><a href="#" id="1" onclick="userOps(this);">置顶</a></li>
<li><a href="#" id="2" onclick="userOps(this);">复制</a></li>
<li><a href="#" id="3" onclick="userOps(this);">删除</a></li>
</ul>
</div>
</div>
定义显示右键菜单的div,右键调用showRightMenu(event,this)方法,return false表示禁止复制。
<div class="b1 box menu-1" style="margin-top:10px;height:40px;" oncontextmenu="showRightMenu(event,this);return false;" value="out"><div class="a1 k4">
//显示右键菜单
function showRightMenu(e,obj){
e.stopPropagation();//防止冒泡
var i='';
var str=$(obj).attr("value");
var i;
if(str=='copy'){
i='';
userId=$(obj).find("input").val();
$("#rightmenu").val(userId);
}else if(str=='out'){
i=2;
needDeletUserIds=$(obj).find("input").val();
var userName=$(obj).find(".k10").text();
if(needDeletUserIds==$("#userId").val()){
return;
}
$("#needDeletUserIds").val(needDeletUserIds+","+userName);
}else if(str=='top'){
i=1;
groupId=$(obj).find("input").val();
$("#rightmenu1").val(groupId);
}else if(str=='onlyout'){
alert("无法进行操作");
return;
}else if(str='build'){
i=3;
}
document.getElementById("rightmenu"+i).style.left = e.clientX + "px";
document.getElementById("rightmenu"+i).style.top = e.clientY + "px";
document.getElementById("rightmenu"+i).style.display = "block";
}
//实际的点击右键菜单触发的操作
function userOps(obj){
var type=$(obj).attr("id");
var data={};
var url='';
var id=$(obj).parent().parent().prev().val();
if(type==1){
url="${ctx}/../jsp/xxx/xxx.action";
data={};
$.ajax({
url : url,
data : data,
dataType : 'json',
type : 'post',
success : function(data1) {
if (data1.result) {
showMenu();
} else {
alert('操作失败!');
}
},
error:function(){
alert("操作出错");
}
});
}else if(type==2){
...
}