创建特定菜单右键单击html选择选项[重复]

Question

我需要创建一个 html 选择，如果单击右键选择了一个选项，则会显示一个带有一些选项的新弹出窗口。重要的是当用户单击右键时选项不会隐藏（所以我不能使用 onchange 或 onclick）。

我也尝试在选项上使用 onclick，但在 Chrome 上不起作用。

有什么想法吗？谢谢！

Answer 1

你试过oncontextmenu吗？
假设element 是将被右键单击的元素：

document.body.addEventListener('click', function() {
  document.getElementById("rightclicked").style.display = "none";
})
document.body.addEventListener('contextmenu', function() {
  document.getElementById("rightclicked").style.display = "none";
})
document.getElementById("element").addEventListener('contextmenu', function(ev) {
  ev.stopPropagation();
  ev.preventDefault();
  rightclick();
  return false;
}, false);

function rightclick() {
  var e = window.event;
  var cantThinkOfAName = document.getElementById("rightclicked");
  cantThinkOfAName.style.display = "block";
  cantThinkOfAName.style.left = e.clientX + "px";
  cantThinkOfAName.style.top = e.clientY + "px";
}

<div id="element">right click</div>
<div id="rightclicked" style="background-color: rgb(200, 200, 200);z-index: 100000; width:150px;height: auto; position: absolute; display: none;">
  <ul style="margin: 0px; padding: 0px; text-align: center; list-style-type: none; text-indent: 0px">
    <a href="#">
      <li style="border-top: none; margin-top: -1px">
        <p>Item1</p>
      </li>
    </a>
    <a href="#">
      <li>
        <p>Item2</p>
      </li>
    </a>
    <a href="#">
      <li>
        <p>Item3</p>
      </li>
    </a>
    <a href="#">
      <li style="margin-bottom: 1px;">
        <p>Item4</p>
      </li>
    </a>
  </ul>
</div>