在附加上下文菜单时，选项卡单击无法工作。
在附加上下文菜单时，选项卡单击无法工作。
提问于 2019-09-15 12:05:18
我已经使用jquery上下文菜单插件在引导选项卡上附加了一个上下文菜单，上下文菜单在悬停时很好地打开，但是选项卡单击之后就不能工作了。为了调试，我在chrome developer工具中附加了一个使用全局事件侦听器的鼠标单击事件，但是它无法捕获任何单击事件，就好像没有发生单击事件一样。
这是我的密码：
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-15 12:27:48
之所以会发生这种情况，是因为上下文菜单在自身下面构建了一个点击捕捉器覆盖(#context-menu-layer)，这样当您单击菜单外部时，它就可以关闭。
所以，发生的事情是：
- 点击是由点击捕捉器消耗的，它关闭了菜单。
- 然后创建一个新的上下文菜单，因为您仍然在目标上徘徊，这将在
: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更多的补丁和改进。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57943938
复制相关文章
相似问题
腾讯云开发者
