oncontextmenu事件如何自定义菜单 - 问答

要自定义菜单，您可以使用JavaScript来捕获鼠标右键点击事件（oncontextmenu事件），然后显示您自定义的菜单。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Custom Context Menu</title>
<style>
.menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
}
</style>
</head>
<body>

<div class="menu" id="customMenu">
  <ul>
    <li onclick="alert('Menu Item 1 Clicked')">Menu Item 1</li>
    <li onclick="alert('Menu Item 2 Clicked')">Menu Item 2</li>
    <li onclick="alert('Menu Item 3 Clicked')">Menu Item 3</li>
  </ul>
</div>

<script>
document.oncontextmenu = function(e) {
  e.preventDefault();
  var customMenu = document.getElementById("customMenu");
  customMenu.style.display = "block";
  customMenu.style.left = e.pageX + "px";
  customMenu.style.top = e.pageY + "px";
};

document.onclick = function() {
  var customMenu = document.getElementById("customMenu");
  customMenu.style.display = "none";
};
</script>

</body>
</html>

在这个示例中，我们首先创建了一个包含三个菜单项的自定义菜单。然后，我们使用JavaScript捕获oncontextmenu事件，并阻止默认的右键菜单弹出。接着，我们根据鼠标点击位置来显示自定义菜单，并在文档的其他地方点击时隐藏菜单。

您可以根据自己的需求修改菜单内容和样式。希望这可以帮助到您！

0 赞

0 踩