js弹出鼠标右击菜单

<div id="content">
  Right-click anywhere on this element to see the custom context menu.
</div>
<div id="customContextMenu" class="context-menu">
  <ul>
    <li><a href="#" id="option1">Option 1</a></li>
    <li><a href="#" id="option2">Option 2</a></li>
    <li><a href="#" id="option3">Option 3</a></li>
  </ul>
</div>

.context-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px #aaa;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: black;
}

.context-menu li a:hover {
  background: #f0f0f0;
}

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 阻止默认的右键菜单显示
  const customMenu = document.getElementById('customContextMenu');
  customMenu.style.display = 'block';
  customMenu.style.left = event.pageX + 'px';
  customMenu.style.top = event.pageY + 'px';
});

document.addEventListener('click', function() {
  const customMenu = document.getElementById('customContextMenu');
  customMenu.style.display = 'none';
});

// 处理菜单项点击事件
document.getElementById('option1').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Option 1 clicked!');
});

document.getElementById('option2').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Option 2 clicked!');
});

document.getElementById('option3').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Option 3 clicked!');
});