Il menu di scelta rapida sull'elemento figlio nidificato mostra anche il menu di scelta rapida

Question

Ho più elementi DOM con menu di scelta rapida. Quando un elemento è figlio dell'altro e invoco il menu di scelta rapida del bambino interiore, vedo anche il menu di scelta rapida dal genitore. Questo è implementato con il plugin jquery-ui.contextmenu.

C'è un modo per configurare il plug-in per impedire che venga visualizzato il menu del genitore o devo gestire manualmente tutti gli eventi di clic e filtrarli in modo da mostrare solo il menu che desidero?

seguito è il mio codice:

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

Puoi trova una demo jsfiddle here. (Fare clic con lo scatola interna e vedere entrambi i menu contestuali)

Answer 1

È possibile risolvere questo problema chiamando event.stopPropagation() metodo nel beforeOpen caso di elemento secondario.

// 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>