当前位置：首页 > JavaScript

js实现网页右键

2026-02-03 00:30:06JavaScript

自定义右键菜单实现

在网页中实现自定义右键菜单通常需要阻止默认的浏览器右键菜单，并显示自定义的菜单元素。以下是完整的实现方法：

HTML 结构

js实现网页右键

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

CSS 样式

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

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

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

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

.hidden {
  display: none;
}

JavaScript 逻辑

js实现网页右键

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

  const menu = document.getElementById('custom-context-menu');
  menu.style.top = `${event.pageY}px`;
  menu.style.left = `${event.pageX}px`;
  menu.classList.remove('hidden');
});

document.addEventListener('click', function() {
  document.getElementById('custom-context-menu').classList.add('hidden');
});

// 为菜单项添加功能
document.getElementById('menu-item-1').addEventListener('click', function() {
  alert('选项1被点击');
  document.getElementById('custom-context-menu').classList.add('hidden');
});

document.getElementById('menu-item-2').addEventListener('click', function() {
  alert('选项2被点击');
  document.getElementById('custom-context-menu').classList.add('hidden');
});

document.getElementById('menu-item-3').addEventListener('click', function() {
  alert('选项3被点击');
  document.getElementById('custom-context-menu').classList.add('hidden');
});

右键菜单高级功能

动态生成菜单项 可以根据不同元素显示不同的菜单项：

document.addEventListener('contextmenu', function(event) {
  const target = event.target;
  const menu = document.getElementById('custom-context-menu');

  // 清空现有菜单项
  menu.querySelector('ul').innerHTML = '';

  if(target.classList.contains('special-element')) {
    menu.querySelector('ul').innerHTML = `
      <li class="special-option">特殊选项</li>
      <li class="other-option">其他选项</li>
    `;
  } else {
    menu.querySelector('ul').innerHTML = `
      <li>普通选项1</li>
      <li>普通选项2</li>
    `;
  }
});

右键菜单位置调整 确保菜单不会超出视口边界：

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

  let left = event.pageX;
  let top = event.pageY;

  // 检查右边界
  if(left + menuWidth > window.innerWidth) {
    left = window.innerWidth - menuWidth;
  }

  // 检查下边界
  if(top + menuHeight > window.innerHeight) {
    top = window.innerHeight - menuHeight;
  }

  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  menu.classList.remove('hidden');
});