滑鼠右鍵選單
阿新 • • 發佈:2018-12-28
當用戶在 <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){ ... }