如何用Javascript/jQuery移除右键菜单中的检查元素功能

需求1：保留右键菜单其他选项，仅禁用“检查元素” #

浏览器原生右键菜单属于浏览器内部组件，JavaScript/jQuery没有权限直接修改或移除原生菜单中的特定选项（比如“检查元素”）。要实现类似效果，只能通过自定义右键菜单模拟原生菜单的常用选项，同时剔除“检查元素”功能。

原生JS实现示例 #

// 创建自定义菜单容器
const customMenu = document.createElement('div');
customMenu.style.cssText = `
  position: fixed;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 0;
  display: none;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
`;

// 定义模拟的原生菜单选项（剔除“检查元素”）
const menuItems = [
  { text: "返回", action: () => window.history.back() },
  { text: "前进", action: () => window.history.forward() },
  { text: "重新加载", action: () => window.location.reload() },
  { text: "另存为...", action: () => document.execCommand('saveAs') },
];

// 生成菜单选项元素
menuItems.forEach(item => {
  const menuItem = document.createElement('div');
  menuItem.style.cssText = `
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
  `;
  menuItem.textContent = item.text;
  
  menuItem.addEventListener('click', () => {
    item.action();
    customMenu.style.display = 'none';
  });
  
  // 添加hover效果
  menuItem.addEventListener('mouseover', () => menuItem.style.background = '#f0f0f0');
  menuItem.addEventListener('mouseout', () => menuItem.style.background = 'transparent');
  
  customMenu.appendChild(menuItem);
});

document.body.appendChild(customMenu);

// 监听右键点击事件
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  // 定位菜单到鼠标位置
  customMenu.style.left = `${e.pageX}px`;
  customMenu.style.top = `${e.pageY}px`;
  customMenu.style.display = 'block';
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', () => {
  customMenu.style.display = 'none';
});

jQuery实现示例 #

// 创建自定义菜单容器
const $customMenu = $('<div>').css({
  position: 'fixed',
  background: '#fff',
  border: '1px solid #ccc',
  borderRadius: '4px',
  padding: '8px 0',
  display: 'none',
  zIndex: 9999,
  boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
});

// 定义模拟的原生菜单选项（剔除“检查元素”）
const menuItems = [
  { text: "返回", action: () => window.history.back() },
  { text: "前进", action: () => window.history.forward() },
  { text: "重新加载", action: () => window.location.reload() },
  { text: "另存为...", action: () => document.execCommand('saveAs') },
];

// 生成菜单选项元素
menuItems.forEach(item => {
  const $menuItem = $('<div>').text(item.text).css({
    padding: '8px 16px',
    cursor: 'pointer',
    fontSize: '14px'
  });
  
  $menuItem.on('click', () => {
    item.action();
    $customMenu.hide();
  }).hover(
    () => $menuItem.css('background', '#f0f0f0'),
    () => $menuItem.css('background', 'transparent')
  );
  
  $customMenu.append($menuItem);
});

$('body').append($customMenu);

// 监听右键点击事件
$(document).on('contextmenu', (e) => {
  e.preventDefault();
  $customMenu.css({
    left: e.pageX,
    top: e.pageY
  }).show();
});

// 点击页面其他区域关闭菜单
$(document).on('click', () => {
  $customMenu.hide();
});

需求2：完全禁用右键菜单，仅允许右键图片显示“在新标签页打开图片” #

这个需求有两种实现思路，可根据需求选择：

思路1：仅允许图片触发原生右键菜单（保留原生所有图片相关选项） #

通过判断右键点击目标是否为图片，非图片元素直接禁用右键菜单：

原生JS实现

document.addEventListener('contextmenu', (e) => {
  // 兼容img被包裹的情况，比如figure内的img
  if (!e.target.closest('img')) {
    e.preventDefault();
  }
});

jQuery实现

$(document).on('contextmenu', (e) => {
  if (!$(e.target).closest('img').length) {
    e.preventDefault();
  }
});

思路2：自定义菜单，仅显示“在新标签页打开图片”选项 #

如果需要严格只保留这一个选项，而非显示原生所有图片右键选项，可通过自定义菜单实现：

原生JS实现

// 创建图片专属右键菜单
const imgMenu = document.createElement('div');
imgMenu.style.cssText = `
  position: fixed;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 16px;
  display: none;
  z-index: 9999;
  cursor: pointer;
  font-size: 14px;
`;
imgMenu.textContent = "在新标签页打开图片";

// 菜单点击事件：打开图片
imgMenu.addEventListener('click', () => {
  if (window.currentImgSrc) {
    window.open(window.currentImgSrc, '_blank');
  }
  imgMenu.style.display = 'none';
});

// 添加hover效果
imgMenu.addEventListener('mouseover', () => imgMenu.style.background = '#f0f0f0');
imgMenu.addEventListener('mouseout', () => imgMenu.style.background = 'transparent');

document.body.appendChild(imgMenu);

// 监听右键点击事件
document.addEventListener('contextmenu', (e) => {
  const targetImg = e.target.closest('img');
  if (targetImg) {
    e.preventDefault();
    window.currentImgSrc = targetImg.src;
    // 定位菜单到鼠标位置
    imgMenu.style.left = `${e.pageX}px`;
    imgMenu.style.top = `${e.pageY}px`;
    imgMenu.style.display = 'block';
  } else {
    e.preventDefault();
  }
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', () => {
  imgMenu.style.display = 'none';
});

jQuery实现

// 创建图片专属右键菜单
const $imgMenu = $('<div>').text("在新标签页打开图片").css({
  position: 'fixed',
  background: '#fff',
  border: '1px solid #ccc',
  borderRadius: '4px',
  padding: '8px 16px',
  display: 'none',
  zIndex: 9999,
  cursor: 'pointer',
  fontSize: '14px'
});

// 菜单点击事件：打开图片
$imgMenu.on('click', () => {
  if (window.currentImgSrc) {
    window.open(window.currentImgSrc, '_blank');
  }
  $imgMenu.hide();
}).hover(
  () => $imgMenu.css('background', '#f0f0f0'),
  () => $imgMenu.css('background', 'transparent')
);

$('body').append($imgMenu);

// 监听右键点击事件
$(document).on('contextmenu', (e) => {
  const $targetImg = $(e.target).closest('img');
  if ($targetImg.length) {
    e.preventDefault();
    window.currentImgSrc = $targetImg.attr('src');
    $imgMenu.css({
      left: e.pageX,
      top: e.pageY
    }).show();
  } else {
    e.preventDefault();
  }
});

// 点击页面其他区域关闭菜单
$(document).on('click', () => {
  $imgMenu.hide();
});

内容的提问来源于stack exchange，提问作者smallbee