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

Question

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

在我的代码片段中，我想打开第一个菜单只有在右键单击(在表格行上)并且打开第二个菜单只有在按钮的左键单击 (在我的行内)。

我只为按钮设置了 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.点击鼠标左键关闭菜单(固定)

$(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>