コンテキスト メニューを持つ複数の DOM 要素があります。1 つの要素が他の要素の子であり、内部の子のコンテキスト メニューを呼び出すと、親からのコンテキスト メニューも表示されます。これはjquery-ui.contextmenuプラグインで実装されています。
親のメニューが表示されないようにプラグインを構成する方法はありますか?それとも、すべてのクリック イベントを手動で処理してフィルター処理し、必要なメニューのみを表示する必要がありますか?
以下は私のコードです:
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());
}
});
ここで jsfiddle のデモを見つけることができます。(内側のボックスを右クリックして、両方のコンテキスト メニューを表示します)