如何获得自定义右键单击上下文菜单以显示指向我网站上页面的两个链接？

Question

如何获得自定义右键单击上下文菜单以显示指向我网站上页面的两个链接？

我希望用户能够右键单击并使自定义内容菜单有两种选择：

联系（带有链接https://rowurbux.weebly.com/contact.html）支持（带有链接https://rowurbux.weebly.com/support.html）

<html>

<head>
  <script type="text/javascript">
    if (document.addEventListener) { // IE >= 9;other browsers 
      document.addEventListener('contextmenu', function(e) {
        alert("You've tried to open context menu"); //here you draw your own menu
        e.preventDefault();
      }, false);
    } else { // IE < 9 
      document.attachEvent('oncontextmenu', function() {
        alert("You've tried to open context menu");
        window.event.returnValue = false;
      });
    }
  </script>
</head>

<body> Lorem ipsum... </body>

</html>

Run Code Online (Sandbox Code Playgroud)

请帮我解决这个问题！

谢谢大家，
威尔

最好是 JS 或 HTML 答案

Answer 1

the*_*ari 7

这是纯 JavaScript 中的简单上下文菜单

const element = document.getElementById("box1");

const listElement = document.getElementById("list");

const onClickOutside = (event) => {
  listElement.style.display = "none";
  document.removeEventListener("click", onClickOutside);
};

listElement.addEventListener("contextmenu", (event) => {
  event.stopPropagation();
});

listElement.addEventListener("mouseup", (event) => {
  event.stopPropagation();
});

document.addEventListener("contextmenu", (event) => {
  listElement.style.display = "none";
});

listElement.addEventListener("click", (event) => {
  event.stopPropagation();
});

element.addEventListener("mouseup", (event) => {
  event.stopPropagation();
  if (event.button === 2) {
    return;
  }
});

element.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  event.stopPropagation();
  document.addEventListener("click", onClickOutside);
  const x = event.offsetX;
  const y = event.offsetY - 15;
  listElement.style.display = "block";
  listElement.style.top = y + "px";
  listElement.style.left = x + "px";
});

Run Code Online (Sandbox Code Playgroud)

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.section {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.box1 {
  position: relative;
  height: 400px;
  width: 400px;
  background-color: #e7e7e7;
}

.list {
  display: none;
  position: absolute;
  list-style: none;
  background-color: #fff;
  width: 100px;
  padding: 0;
}

.list li {
  padding: 10px;
  cursor: pointer;
}

.list li a{
  padding: 0;
  text-decoration: none;
  color: #333;
}

.list li a:hover, .list li:hover a{
  text-decoration: none;
  color: #fff;
}

.list li:hover {
  background-color: #333;
  color: #fff;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <section class="section">
      <div class="left_panel">
        <div class="box1" id="box1">
          <p>Right Click on anywhere inside place to get links in context menu</p>
          <ul class="list" id="list">
            <li><a href="https://rowurbux.weebly.com/contact.html">Contact</a></li>
            <li><a href="https://rowurbux.weebly.com/support.html">Support</a></li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	9586 次
最近记录：	5 年，6 月前