如何使用 jQuery ContextMenu 在一个表内有两个不同的菜单一个在另一个之上？

Question

使用jQuery ContextMenu 插件或纯Javascript，是否可以使用2 个不同的上下文菜单（第一个在父元素上，第二个在子元素上）？

在我的 sn-p 中，我想打开 第一个菜单仅在右键单击时（在表格行上）并打开 第二个菜单仅在左键单击时按钮（在我的行内）。

我只为按钮设置了trigger: 'left'，但是当我左键单击它时，两个菜单都显示为您在此处看到的：

$(function() {
    $.contextMenu({
        selector: '.context-menu-one', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
           copy: {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        }
    });
    
    $.contextMenu({
        selector: '.context-menu-two', 
              trigger: 'left',
        items: {
            "new": {name: "New", icon: "new"},
            "open": {name: "Open", icon: "open"}
        }
    });  
});

table{width:300px;height:100px}
tr {background:#222;color:#fff}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>
<link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script>
<table>
    <tbody>
        <tr role="row" class="context-menu-one">
            <td>
                <button class="context-menu-two">Left click</button>
            </td>
        </tr>
    </tbody>
</table>

有没有办法阻止我点击按钮时显示第一个菜单？

第一次更新

根据 Aswin Kumar 的回答，这两个菜单分别正确显示，但正如您从下面的 gif 中看到的那样，如果您尝试这样做：

1. 点击按钮
2. 将鼠标悬停在菜单上
3. 将鼠标移到菜单外
4. 单击鼠标左键关闭菜单

在这种情况下，用户无法关闭菜单（第 4 点）。是否有解决方法可以在菜单外单击鼠标左键关闭菜单？

Answer 1

使用 contextMenu 的 show 事件（可取消）和 jquery 的 hasClass 来验证目标元素。在z-index的帮助下

更新

4.点击鼠标左键关闭菜单(fixed)

$(function() {

  $(document).on('mousedown', function(e) {
      $('.context-menu-one').contextMenu('hide');
      $('.context-menu-two').contextMenu('hide');
      e.preventDefault();
      e.stopImmediatePropagation();
  });

  $.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m);
    },
    events: {
      show: function() {
        if ($(event.target).hasClass('context-menu-two')) {
          return false
        }
        $('.context-menu-two').first().contextMenu('hide');
      }
    },
    autoHide: true,
    items: {
      "edit": {
        name: "Edit",
        icon: "edit"
      },
      "cut": {
        name: "Cut",
        icon: "cut"
      },
      copy: {
        name: "Copy",
        icon: "copy"
      },
      "paste": {
        name: "Paste",
        icon: "paste"
      },
      "delete": {
        name: "Delete",
        icon: "delete"
      },
      "sep1": "---------",
      "quit": {
        name: "Quit",
        icon: function() {
          return 'context-menu-icon context-menu-icon-quit';
        }
      }
    }
  });

  $.contextMenu({
    selector: '.context-menu-two',
    trigger: 'left',
    autoHide: true,
    items: {
      "new": {
        name: "New",
        icon: "new"
      },
      "open": {
        name: "Open",
        icon: "open"
      }
    }
  });
});

table {
  width: 300px;
  height: 100px
}

tr {
  background: #222;
  color: #fff
}

.context-menu-two {
  position: relative;
  z-index: 2;
}

.context-menu-root {
  z-index: 3!important;
}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" />
<link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script>
<table>
  <tbody>
    <tr role="row" class="context-menu-one">
      <td>
        <button class="context-menu-two">Left click</button>
      </td>
    </tr>
  </tbody>
</table>