Menu kontekstowe w zagnieżdżonym elemencie podrzędnym również pokazuje nadrzędne menu kontekstowe.

Question

Mam wiele elementów DOM z menu kontekstowymi. Kiedy jeden element jest dzieckiem drugiego i przywołuję menu kontekstowe wewnętrznego elementu potomnego, widzę także menu kontekstowe z elementu nadrzędnego. Jest to realizowane za pomocą wtyczki jquery-ui.contextmenu.

Czy istnieje sposób skonfigurowania wtyczki, aby zapobiec wyświetlaniu menu rodzica lub czy będę musiał ręcznie obsłużyć wszystkie zdarzenia kliknięcia i odfiltrować je tak, aby wyświetlać tylko żądane menu?

Po to mój kod:

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

Można znajdź jsfiddle demo here. (prawym przyciskiem myszy skrzynkę wewnętrzną i zobaczyć zarówno menu kontekstowych)

Answer 1

Można rozwiązać ten problem poprzez wywołanie event.stopPropagation() metodę w przypadku beforeOpen elementu podrzędnego.

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