Javascript Tab click在附加了悬停上下文菜单时不起作用

我已经使用jquery上下文菜单插件在引导选项卡上附加了一个悬停上下文菜单，上下文菜单在悬停时可以很好地打开，但是在悬停之后，选项卡单击就不起作用了。为了调试，我在ChromeDeveloper工具中使用全局事件监听器附加了一个鼠标点击事件，但它也无法捕获任何点击事件，就像没有发生点击事件一样

这是我的密码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
  $(function() {
    $.contextMenu({
      selector: '#one-tab',
      trigger: 'hover',
      callback: function(key, options) {

        console.log(key)
      },
      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';
          }
        }
      }
    });
  });
</script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card mt-3 tab-card">
        <div class="card-header tab-card-header">
          <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">One</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Two</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Three</a>
            </li>
          </ul>
        </div>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
            <h5 class="card-title">Tab Card One</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
            <h5 class="card-title">Tab Card Two</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab">
            <h5 class="card-title">Tab Card Three</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

小提琴链接：

---

之所以会出现这种情况，是因为上下文菜单在其自身上下文菜单层下构建了一个点击捕捉器覆盖层，这样当您在菜单外点击时，它可以关闭

那么，会发生什么呢

单击被单击捕捉器使用，该捕捉器关闭菜单 然后会创建一个新的上下文菜单，因为您仍将鼠标悬停在目标上，该目标会在：hover上打开上下文菜单。 要解决这个问题，您需要解决两个问题：

a您必须能够通过点击捕捉器点击：

#context-menu-layer {
  pointer-events: none;
}

b你必须在点击时自己关闭关联菜单

 $(window).on('click', () => $('.context-menu-list').trigger('contextmenu:hide'));

看到了

旁注：您不应该使用引导v4.0.0。您应该使用Get started（入门）按钮，因为它包含了许多针对v4.0.0的错误修复和改进。

use！在[image][1]之前，因此它呈现问题中的图像。或按钮上载将为您创建此的图像。