使用 contextmenu 在另一个 div 内的 div 中阻止 contextmenu

Question

我在主 div 中有一个上下文菜单，它可以正常工作，但是当我单击项目 div 时，我的上下文菜单不起作用。我试图阻止项目 div 中的上下文菜单，但它不起作用。 因此，我想在项目 div 中阻止我的 contextmenu main 为每个要删除或编辑的项目添加另一个 contextmenu。 提前致谢。

这是我的代码：

// main
const main = document.querySelector('.main');
main.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  var contextElement = document.getElementById("context-menu");
  contextElement.style.top = event.offsetY + "px";
  contextElement.style.left = event.offsetX + "px";
  contextElement.classList.add("active");
});
window.addEventListener('click', function() {
  document.getElementById('context-menu').classList.remove('active');
});

// item
const item = document.querySelector('.item');
item.addEventListener('contextmenu', function(event) {
  event.preventDefault();
});

body {
  margin: 0px;
  font-family: "Open Sans", sans-serif;
}

#context-menu {
  position: absolute;
  z-index: 10000;
  width: 150px;
  background: #1b1a1a;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top left;
}

#context-menu.active {
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}

#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
}

#context-menu .item:hover {
  background: #555;
}

.main {
  position: relative;
  width: 80%;
  height: 80vh;
  border: 1px solid red;
}

.list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.main .item {
  border: 1px solid red;
  height: 100px;
}

<div id="context-menu">
  <div class="item">
    New folder
  </div>
  <div class="item">
    New Document
  </div>
</div>


<div class="main">
  <div class="list">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
    <div class="item">
      item 3
    </div>
  </div>
  main
</div>

Answer 1

解决方案是添加一个 if 来检查 event.target.id，如下所示：

if (event.target.id === 'item') {
  main_menu.classList.remove('active');
} else {
  var item_menu = document.querySelector("#item-menu");
  item_menu.classList.remove("active");
  main_menu.classList.add('active');
}

window.addEventListener('click', function() {
  document.querySelector('#main-menu').classList.remove('active');
  document.querySelector('#item-menu').classList.remove('active');
});

// main
const main = document.querySelector('#main');
main.addEventListener("contextmenu", function(event) {
  event.preventDefault();

  var main_menu = document.querySelector("#main-menu");
  main_menu.style.top = event.pageY + "px";
  main_menu.style.left = event.pageX + "px";

  if (event.target.id === 'item') {
    main_menu.classList.remove('active');
  } else {
    var item_menu = document.querySelector("#item-menu");
    item_menu.classList.remove("active");
    main_menu.classList.add('active');
  }

});

// items
const items = document.querySelectorAll('#item');
items.forEach(item => {
  item.addEventListener('contextmenu', function(event) {

    event.preventDefault();
    var item_menu = document.querySelector("#item-menu");
    item_menu.style.top = event.pageY + "px";
    item_menu.style.left = event.pageX + "px";
    item_menu.classList.add('active');
  });
});

body {
  margin: 0px;
  font-family: "Open Sans", sans-serif;
}

.context-menu {
  position: absolute;
  z-index: 10000;
  width: 180px;
  background: #1b1a1a;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top left;
}

.context-menu.active {
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}

.context-menu .link {
  padding: 8px 10px;
  font-size: 15px;
  color: #eee;
}

.context-menu .link:hover {
  background: #555;
}

.main {
  position: relative;
  width: 80%;
  height: 80vh;
  border: 1px solid red;
}

.list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.main .item {
  border: 1px solid red;
  height: 100px;
  position: relative;
}

<div id="main-menu" class="context-menu">
  <div class="link" oncontextmenu="return false;">
    New Folder
  </div>
  <div class="link" oncontextmenu="return false;">
    New Document
  </div>
</div>

<div id="item-menu" class="context-menu">
  <div class="link" oncontextmenu="return false;">
    Delete
  </div>
  <div class="link" oncontextmenu="return false;">
    Update
  </div>
</div>


<div class="main" id="main">
  <div class="list">
    <div class="item" id="item">
      item 1
    </div>
    <div class="item" id="item">
      item 2
    </div>
    <div class="item" id="item">
      item 3
    </div>
  </div>
  main
</div>