书签小工具中如何阻止Shift+右键触发的上下文菜单并识别图片源？

DevOps 小满

2026-6-23

Shift+右键识别图片源的书签工具解决方案

一、用contextmenu事件实现（推荐）

直接监听contextmenu事件，同时满足Shift键按下+点击目标是图片两个条件时，获取图片地址并阻止默认右键菜单弹出：

document.addEventListener('contextmenu', function(event) {
  // 检查Shift键是否按下，且点击元素是图片
  if (event.shiftKey && event.target.tagName.toLowerCase() === 'img') {
    const imgSrc = event.target.src;
    if (imgSrc) {
      console.log('图片地址:', imgSrc);
      // 这里可以替换成你需要的操作，比如复制到剪贴板
      // navigator.clipboard.writeText(imgSrc);
    } else {
      alert('未找到图片地址');
    }
    // 阻止默认右键菜单弹出
    event.preventDefault();
  }
});

关键说明：

event.target比srcElement兼容性更好，优先使用
必须判断点击的元素是<img>，避免误触发其他元素的右键操作
只有符合条件时才调用event.preventDefault()，不影响正常右键菜单使用

二、用mousedown事件优化实现

如果想用mousedown事件，需要额外判断右键点击（event.button === 2），同时在符合条件时阻止默认行为：

document.addEventListener('mousedown', function(event) {
  // 检查Shift键按下+右键点击+目标是图片
  if (event.shiftKey && event.button === 2 && event.target.tagName.toLowerCase() === 'img') {
    const imgSrc = event.target.src;
    if (imgSrc) {
      console.log('图片地址:', imgSrc);
      // 自定义操作，比如复制地址
    } else {
      alert('未找到图片地址');
    }
    // 阻止默认行为（包括右键菜单弹出）
    event.preventDefault();
    // 部分浏览器可能需要额外阻止事件冒泡
    event.stopPropagation();
  }
});