jquery - Context menu on nested child element also shows parent context menu -

jquery - Context menu on nested child element also shows parent context menu -

i have multiple dom elements context menus. when 1 element kid of other , invoke context menu of inner child, see context menu parent. implemented jquery-ui.contextmenu plugin.

is there way configure plugin prevent parent's menu beingness shown or going have handle click events manually , filter them show menu want?

following code:

html:

<!-- add together kid have context menu --> <div class="outer-child" id="outer-child"> outer kid <!-- inner kid own context menu --> <div class="inner-child" id="inner-child"> inner kid </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 kid $("#outer-child").contextmenu({ menu: [ {title: "this outer menu", cmd: "outer-menu"} ], select: function(event, ui) { alert("select " + ui.cmd + " on " + ui.target.text()); } }); // create context menu on inner kid $('#inner-child').contextmenu({ menu: [ {title: "inner menu", cmd: "inner-menu"} ], select: function(event, ui) { alert("select " + ui.cmd + " on " + ui.target.text()); } });

you can find jsfiddle demo here. (right-click inner box , see both context menus)

you can prepare issue calling event.stoppropagation() method in beforeopen event of kid element.

class="snippet-code-js lang-js prettyprint-override">// create context menu on outer kid $("#outer-child").contextmenu({ menu: [{ title: "this outer menu", cmd: "outer-menu" }], select: function(event, ui) { alert("select " + ui.cmd + " on " + ui.target.text()); }, }); // create context menu on inner kid $('#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()); } }); class="snippet-code-css lang-css prettyprint-override">.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; } class="snippet-code-html lang-html prettyprint-override"><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 area contain our editable components --> <div class="container" id="container"> <!-- add together kid have context menu --> <div class="outer-child" id="outer-child">outer kid <!-- inner kid own context menu --> <div class="inner-child" id="inner-child">inner child</div> </div> </div>

jquery jquery-ui contextmenu jquery-ui-contextmenu