怎样用js脚本实现自定义右键菜单_js右键菜单功能脚本编写方法

document.addEventListener('contextmenu', function(e) {
  e.preventDefault(); // 阻止默认菜单
  const menu = document.getElementById('custom-menu');
  menu.style.display = 'block';
  menu.style.left = e.clientX + 'px';
  menu.style.top = e.clientY + 'px';
});

<div id="custom-menu" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:4px; padding:8px 0; z-index:999;">
  <div data-action="copy" style="padding:6px 16px; cursor:pointer;">复制</div>
  <div data-action="paste" style="padding:6px 16px; cursor:pointer;">粘贴</div>
  <div data-action="refresh" style="padding:6px 16px; cursor:pointer;">刷新</div>
</div>

document.getElementById('custom-menu').addEventListener('click', function(e) {
  const action = e.target.dataset.action;
  if (action === 'copy') {
    document.execCommand('copy') ? alert('已复制') : alert('复制失败');
  } else if (action === 'paste') {
    alert('粘贴功能需结合 Clipboard API');
  } else if (action === 'refresh') {
    location.reload();
  }
  this.style.display = 'none'; // 点击后隐藏
});

document.addEventListener('click', function() {
  document.getElementById('custom-menu').style.display = 'none';
});