嵌套子元素上的上下文菜单也显示父上下文菜单 [英] Context menu on nested child element also shows parent context menu

问题描述

我有多个带有上下文菜单的DOM元素.当一个元素是另一个元素的子元素时，当我调用内部子元素的上下文菜单时，我还会从父元素中看到上下文菜单.这是通过 jquery-ui.contextmenu 插件实现的.

I have multiple DOM elements with context menus. When one element is a child of the other and I invoke the context menu of the inner child, I also see the context menu from the parent. This is implemented with the jquery-ui.contextmenu plugin.

是否可以通过配置插件来防止显示父菜单，还是我必须手动处理所有单击事件并过滤它们，以便仅显示我想要的菜单?

Is there a way to configure the plugin to prevent the parent's menu from being shown or am I going to have to handle all the click events manually and filter them so I show only the menu I want?

以下是我的代码:

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:

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演示. (右键单击内部框，然后看到两个上下文菜单)

You can find a jsfiddle demo here. (Right-click the inner box and see both context menus)

推荐答案

您可以通过在子元素的beforeOpen事件中调用event.stopPropagation()方法来解决此问题.

You can fix this issue by calling event.stopPropagation() method in the beforeOpen event of child element.

// 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({
  beforeOpen: function(event, ui) {
    event.stopPropagation();
  },
  menu: [{
    title: "Inner Menu",
    cmd: "inner-menu"
  }],
  select: function(event, ui) {
    alert("select " + ui.cmd + " on " + ui.target.text());
  }
});

.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;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>
<!-- Create an area to contain our editable components -->
<div class="container" id="container">
  <!-- 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>

这篇关于嵌套子元素上的上下文菜单也显示父上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！