1. 程式人生 > >滑鼠右鍵選單

滑鼠右鍵選單

當用戶在 <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){
		...
	}