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

Question

我尝试了几天在互联网上找到解决方案，使右键单击与左键单击相同，但具有一些附加功能。

当我单击右键并且鼠标指向某个元素时，我需要从 TreeView 和 $('custom-menu').prop('display','block');

有左键打开div的代码:

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

我认为这就是您要找的，如果您可以使用 jQuery .请参阅在线评论以获取解释。

// 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>