Kontextmenü auf verschachtelten Kind-Element zeigt auch übergeordnete Kontextmenü

Question

Ich habe mehrere DOM-Elemente mit Kontextmenüs. Wenn ein Element ein Kind des anderen ist und ich das Kontextmenü des inneren Kindes aufrufen, sehe ich auch das Kontextmenü des Elternteils. Dies wird mit dem jquery-ui.contextmenu Plugin implementiert.

Gibt es eine Möglichkeit, das Plugin zu konfigurieren, um zu verhindern, dass das Elternmenü angezeigt wird, oder muss ich alle Klickereignisse manuell verarbeiten und sie filtern, sodass nur das gewünschte Menü angezeigt wird?

Im Anschluss ist mein Code:

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

können Sie Finden Sie eine jsfiddle Demo here. (Rechtsklick auf den inneren Kasten und sehen die beiden Kontextmenüs)

Answer 1

Sie können dieses Problem beheben, indem event.stopPropagation() Methode im beforeOpen Fall untergeordnetes Element aufrufen.

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