Trình đơn ngữ cảnh trên phần tử con lồng nhau cũng hiển thị menu ngữ cảnh gốc

Question

Tôi có nhiều phần tử DOM với các menu ngữ cảnh. Khi một phần tử là một phần tử con của cái kia và tôi gọi trình đơn ngữ cảnh của con bên trong, tôi cũng thấy trình đơn ngữ cảnh từ phần tử cha. Điều này được triển khai với plugin jquery-ui.contextmenu.

Có cách nào để định cấu hình plugin để ngăn trình đơn của cha mẹ không hiển thị hay tôi sẽ phải xử lý tất cả các sự kiện nhấp theo cách thủ công và lọc chúng để tôi chỉ hiển thị menu tôi muốn?

Tiếp theo là mã của tôi:

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

Bạn có thể tìm bản trình diễn jsfiddle here. (Kích chuột phải vào hộp bên trong và nhìn thấy cả hai menu ngữ cảnh)

Answer 1

Bạn có thể khắc phục vấn đề này bằng cách gọi event.stopPropagation() phương pháp trong trường hợp beforeOpen của phần tử con.

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