El menú contextual en el elemento secundario nested también muestra el menú contextual principal

Tengo varios elementos DOM con menús contextuales. Cuando un elemento es un hijo del otro e invoco el menú contextual del niño interior, también veo el menú contextual desde el padre. Esto se implementa con el complemento jquery-ui.contextmenu .

¿Hay alguna forma de configurar el complemento para evitar que se muestre el menú principal o voy a tener que manejar todos los eventos de clic manualmente y filtrarlos para que muestre solo el menú que quiero?

Lo siguiente es mi código:

HTML:

 
Outer Child
Inner Child

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()); } }); 

Puedes encontrar una demo de jsfiddle aquí . ( Haga clic derecho en el cuadro interno y vea ambos menús contextuales )

Puede solucionar este problema llamando event.stopPropagation() método event.stopPropagation() en el evento beforeOpen del elemento hijo.

 // 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; } 
      
Outer Child
Inner Child