Question

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

我也尝试使用onclick选项，但不能在Chrome上运行。

有什么想法吗？谢谢！

Answer 1

您是否尝试过oncontextmenu？假设element是要右键单击的元素：

＆＃13;

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";
}

＆＃13;

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

＆＃13;

右键单击html选择选项创建特定菜单

1 个答案: