当前位置：首页 > JavaScript

js 实现右键菜单

2026-01-30 11:28:42JavaScript

实现右键菜单的基本方法

在JavaScript中实现右键菜单通常需要阻止默认的浏览器右键菜单，并显示自定义的菜单。以下是实现的基本步骤：

阻止默认的右键菜单行为：

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

创建自定义菜单的HTML结构：

<div id="customContextMenu" class="context-menu">
  <ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

添加CSS样式隐藏菜单并美化外观：

.context-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

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

.context-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f5f5f5;
}

显示和隐藏右键菜单

监听右键点击事件并显示菜单：

js 实现右键菜单

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

点击其他地方时隐藏菜单：

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

添加菜单功能

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

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

进阶实现方案

使用事件委托提高性能：

js 实现右键菜单

document.addEventListener('contextmenu', function(e) {
  if (e.target.classList.contains('has-context-menu')) {
    e.preventDefault();
    showContextMenu(e);
  }
});

function showContextMenu(e) {
  // 显示菜单逻辑
}

支持动态菜单内容：

function createContextMenu(items) {
  const menu = document.createElement('div');
  menu.className = 'context-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);
  return menu;
}

注意事项

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

function adjustMenuPosition(menu, x, y) {
  const rect = menu.getBoundingClientRect();
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  if (x + rect.width > windowWidth) {
    x = windowWidth - rect.width;
  }

  if (y + rect.height > windowHeight) {
    y = windowHeight - rect.height;
  }

  menu.style.left = x + 'px';
  menu.style.top = y + 'px';
}

处理移动端触摸事件：

document.addEventListener('touchstart', function(e) {
  if (e.touches.length === 1) {
    const touch = e.touches[0];
    const longTouchTimer = setTimeout(() => {
      showContextMenu({
        pageX: touch.pageX,
        pageY: touch.pageY
      });
    }, 500);

    e.target.addEventListener('touchend', function() {
      clearTimeout(longTouchTimer);
    });
  }
});

这些方法提供了从基础到进阶的右键菜单实现方案，可以根据具体需求进行调整和扩展。