js实现右键菜单

实现右键菜单的基本步骤

在JavaScript中实现右键菜单通常需要阻止默认的浏览器右键菜单，并自定义一个菜单元素。以下是实现方法：

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  const menu = document.getElementById('custom-menu');
  menu.style.display = 'block';
  menu.style.left = `${e.pageX}px`;
  menu.style.top = `${e.pageY}px`;
});

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

HTML结构示例

需要准备一个自定义菜单的HTML结构：

<div id="custom-menu" style="display: none; position: absolute; background: white; border: 1px solid #ccc;">
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li style="padding: 8px 12px; cursor: pointer;">选项1</li>
    <li style="padding: 8px 12px; cursor: pointer;">选项2</li>
    <li style="padding: 8px 12px; cursor: pointer;">选项3</li>
  </ul>
</div>

添加菜单项功能

为每个菜单项添加点击事件处理：

const menuItems = document.querySelectorAll('#custom-menu li');
menuItems.forEach(item => {
  item.addEventListener('click', function() {
    console.log(`选择了: ${this.textContent}`);
    document.getElementById('custom-menu').style.display = 'none';
  });
});

边界处理

确保菜单不会超出视口边界：

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  const menu = document.getElementById('custom-menu');
  const menuWidth = menu.offsetWidth;
  const menuHeight = menu.offsetHeight;

  let x = e.pageX;
  let y = e.pageY;

  if (x + menuWidth > window.innerWidth) {
    x = window.innerWidth - menuWidth;
  }

  if (y + menuHeight > window.innerHeight) {
    y = window.innerHeight - menuHeight;
  }

  menu.style.left = `${x}px`;
  menu.style.top = `${y}px`;
  menu.style.display = 'block';
});

样式优化

使用CSS替代内联样式：

#custom-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

#custom-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

#custom-menu li:hover {
  background-color: #f0f0f0;
}

动态生成菜单

根据上下文动态生成菜单项：

function showContextMenu(e, items) {
  e.preventDefault();
  const menu = document.createElement('div');
  menu.className = 'custom-menu';

  const ul = document.createElement('ul');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.label;
    li.addEventListener('click', item.action);
    ul.appendChild(li);
  });

  menu.appendChild(ul);
  document.body.appendChild(menu);

  positionMenu(menu, e);

  setTimeout(() => {
    document.addEventListener('click', function hideMenu() {
      menu.remove();
      document.removeEventListener('click', hideMenu);
    }, { once: true });
  });
}

function positionMenu(menu, e) {
  // 边界处理逻辑
}