右键单击执行一些元素操作

Question

i'm trying for few days to find solution on internet to make right click same as left but with some additional functions.

When i click right click and mouse is pointed on some element, i need to select pointed item like on leftclick event from TreeView and $('custom-menu').prop('display','block');

There is code for opening div on left click:

 function showContextMenu(event) { event.preventDefault; var contextMenu = document.getElementById('custom-menuDir'); $("body").bind('click', function() { $("#custom-menuDir").hide(); }); contextMenu.style.display = 'block'; contextMenu.style.left = event.clientX + 'px'; contextMenu.style.top = event.clientY + 'px'; return false; } function listenKeys(event) { var keyCode = event.which || event.keyCode; if (keyCode == 27) { hideContextMenu(); } } function hideContextMenu() { var contextMenu = document.getElementById('custom-menuDir'); contextMenu.style.display = 'none'; } // This custom-menuAg is some other menu, its not typo error: function PassingFunction(clicked_id) { $("#idOdeljenja").val(clicked_id); $.ajax({ url: "@Url.Action(" VratiNazivOrgJed ", " OrgJedinice ")", type: "GET", data: { 'idOdeljenja': clicked_id }, success: function(returnData) { var naziv = JSON.parse(returnData); $("#nazivOdeljenja").html(naziv); } }); $.ajax({ url: "@Url.Action(" GetAgOdeljenja ", " Ag ")", type: "GET", data: { 'idOdeljenja': clicked_id }, success: function(returnData) { $("#gridAg").igGrid({ primaryKey: "AgID", dataSource: returnData, autoGenerateColumns: false, renderCheckboxes: true, columns: [ { headerText: 'AgID', key: 'AgID', dataType: 'number', allowHiding: true, hidden: true, template: "<p>${AgID}</p>" }, { headerText: 'FondID', key: 'FondID', dataType: 'number', allowHiding: true, hidden: true, template: "<p>${FondID}</p>" }, { headerText: 'Сигнатура', key: 'AgSignatura', dataType: 'string', width: 200, template: "<p>${AgSignatura}</p>" }, { headerText: 'Име', key: 'AgIme', dataType: 'string', width: 200, template: "<p>${AgIme}</p>" }, { headerText: 'Садржај', key: 'AgSadrzaj', dataType: 'string', hidden: true, width: 200, template: "<p>${AgSadrzaj}</p>" }, { headerText: 'ГодинеОрг-од', key: 'AgGodineOrgJca', dataType: 'string', width: 200, template: "<p>${AgGodineOrgJca}</p>" }, { headerText: 'ГодинеОрг-до', key: 'AgGodineOrgJca2', dataType: 'string', width: 200, template: "<p>${AgGodineOrgJca2}</p>" }, { headerText: 'ГодинеГрађа-од', key: 'AgGodineGradja', dataType: 'string', width: 200, template: "<p>${AgGodineGradja}</p>" }, { headerText: 'ГодинеГрађа-до', key: 'AgGodineGradja2', dataType: 'string', width: 200, template: "<p>${AgGodineGradja2}</p>" }, { headerText: 'Очуваност', key: 'OcuvanostID', dataType: 'number', allowHiding: true, hidden: false, template: "<p>${OcuvanostID}</p>" }, { headerText: 'Сређеност', key: 'SredjenostID', dataType: 'number', allowHiding: true, hidden: false, template: "<p>${SredjenostID}</p>" }, { headerText: 'Конзервација', key: 'AgKonzervacija', dataType: 'bool', width: 100 }, { headerText: 'Микрофилм', key: 'AgMikrofilm', dataType: 'bool', width: 100 }, { headerText: 'Допуна', key: 'AgDopuna', dataType: 'bool', width: 100 }, { headerText: 'Услов објављивања', key: 'UslovObjavljivanjeID', dataType: 'number', allowHiding: true, hidden: false, template: "<p>${UslovObjavljivanjeID}</p>" }, { headerText: 'Услов доступност', key: 'UslovDostupnostID', dataType: 'number', allowHiding: true, hidden: false, template: "<p>${UslovDostupnostID}</p>" }, { headerText: 'Напомена', key: 'AgNapomena', dataType: 'string', width: 200, template: "<p>${AgNapomena}</p>" }, ], features: [{ name: 'Selection', mode: 'row', multipleSelection: true, /*FALSE!*/ activation: true }, { name: 'Paging', type: 'local', pageSize: 20 }, { name: 'Sorting', type: 'local' }, { name: 'Filtering', type: 'local', mode: 'simple' } ] }); $('#gridAg').delegate('.ui-iggrid-activerow', 'click', function(e) { prikazDokumenata(); }); $('#gridAg').delegate('.ui-iggrid-activerow', 'dblclick', function(e) { IzmenaAgID(); }); $('#gridAg').bind("contextmenu", function(e) { e.preventDefault(); var rowIndex = $(e.target).closest('tr').index(); $('#gridАg').igGridSelection('selectRow', rowIndex); $("#custom-menuAg").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(200); }); $(document).bind('click', function() { $("#custom-menuAg").hide(); }); }, error: {} }); } 

 .collapse { width: 15px; background-image: url('images/ui-icons_454545_256x240.png'); background-repeat: no-repeat; background-position: -36px -17px; display: inline-block; cursor: pointer; } .expand { width: 15px; background-image: url('images/ui-icons_454545_256x240.png'); background-repeat: no-repeat; background-position: -50px -17px; display: inline-block; cursor: pointer; } .treeview ul { font: 14px Arial, Sans-Serif; margin: 0px; padding-left: 20px; list-style: none; } .treeview > li > a { font-weight: bold; } .treeview li {} .treeview li a { padding: 4px; font-size: 12px; display: inline-block; text-decoration: none; width: auto; } 

 <!-- (added dynamically generated HTML of Tree View):--> <div id="nav" style="border: solid 1px lightblue; padding: 5px; overflow: auto; background-color: #FAFAFA; position: absolute; width: 90%; height: 600px; top: 150px; border-radius: 4px; "> <div class="treeview" oncontextmenu="return showContextMenu(event);" id="nav2"> <ul> <li> <span class="collapse collapsible">&nbsp;</span> <span> <a href="#" id="822" onclick="PassingFunction(822)" style="font-weight: normal;">1-Фонд</a> </span> <ul> <li> <span class="collapse collapsible">&nbsp;</span> <span> <a href="#" id="1575" onclick="PassingFunction(1575)" style="font-weight: normal;">-одељење1</a> </span> <ul> <li> <span style="width:15px; display:inline-block">&nbsp;</span> <span> <a href="#" id="1577" onclick="PassingFunction(1577)" style="font-weight: bold;">-одељење</a> </span> </li> </ul> </li> <li> <span class="collapse collapsible">&nbsp;</span> <span> <a href="#" id="1576" onclick="PassingFunction(1576)">-одељење</a> </span> <ul> <li> <span style="width:15px; display:inline-block">&nbsp;</span> <span> <a href="#" id="1597" onclick="PassingFunction(1597)">-ссссс</a> </span> </li> </ul> </li> </ul> </li> </ul> </div> </div> <!--HTML OF custom-menuDir:--> <div id="custom-menuDir" class="custom-menu" style="display: none; border-radius: 4px;"> <ol> <li class="list-devider"></li> <li> <a onclick="novoOdeljenje();" style="cursor: pointer; margin-left: 21px; color: steelblue; "> Ново одељење/одсек </a> </li> <li> <a onclick="prebaciAG();" style="cursor: pointer; margin-left: 21px; color: steelblue; "> Пребаци архивску грађу </a> </li> <li class="list-devider"></li> <li> <a onclick="ProveraSum();" style="cursor: pointer; margin-left: 21px; color: steelblue; "> Подаци </a> </li> </ol> </div> 

Answer 1

I think this is what you are looking for, if you can use jQuery . See the comments in-line for explanation.

 // Remove the default document right-click menu $(document).bind("contextmenu",function(e){ return false; }); // On clicking on one of the menu items, unhighlight all others and hide all context menus. // Then highlight the one that was right-clicked and show it's context-menu $(".menu li").contextmenu(function() { $('.context-menu').hide(); $('.selected').removeClass('selected'); $(this).addClass('selected').find(".context-menu").show(); }); // When the document is clicked, hide all context menus and remove the highlighting. $(document).on('click', function() { $('.selected').removeClass('selected'); $('.context-menu').hide(); }) 

 .menu { position:relative; list-style:none; padding:none; } .menu li.selected { background: yellow; } .context-menu { display:none; padding:0; list-style:none; position:absolute; background:white; border:1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li>Menu item <ul class="context-menu"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> <li>Menu item 2 <ul class="context-menu"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> </ul>