我有多个具有上下文菜单的DOM元素。当一个元素是另一个元素的子元素时,我调用内部子元素的上下文菜单时,也会看到父元素的上下文菜单。这是使用jquery-ui.contextmenu插件实现的。
是否有一种方法可以配置插件以防止显示父菜单,还是我必须手动处理所有点击事件并进行过滤,以便仅显示所需的菜单?
以下是我的代码:
HTML:
是否有一种方法可以配置插件以防止显示父菜单,还是我必须手动处理所有点击事件并进行过滤,以便仅显示所需的菜单?
以下是我的代码:
HTML:
<!-- Add a child which will have a context menu -->
<div class="outer-child" id="outer-child">
Outer Child
<!-- inner child with its own context menu -->
<div class="inner-child" id="inner-child">
Inner Child
</div>
</div>
</div>
CSS:
.outer-child {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 1px solid red;
background: green;
}
.inner-child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border: 1px solid blue;
background: yellow;
}
JavaScript:
// create context menu on outer child
$("#outer-child").contextmenu({
menu: [
{title: "This is the Outer Menu", cmd: "outer-menu"}
],
select: function(event, ui) {
alert("select " + ui.cmd + " on " + ui.target.text());
}
});
// create context menu on inner child
$('#inner-child').contextmenu({
menu: [
{title: "Inner Menu", cmd: "inner-menu"}
],
select: function(event, ui) {
alert("select " + ui.cmd + " on " + ui.target.text());
}
});
您可以在这里找到一个jsfiddle演示(点击此处)。(右键单击内部框并查看两个上下文菜单)