鼠标右键菜单

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dongyuxu342719/article/details/82977686

当用户在 <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){
		...
	}