React下Firefox移动端及iOS Safari长按图片阻止上下文菜单失效问题

• 脚本执行时机不匹配：你把脚本放在index.html中，脚本加载执行时React组件还未完成挂载，document.getElementById('Image')无法获取到后续渲染出来的图片元素，事件绑定完全不生效
• init函数未主动触发：你定义了init绑定逻辑，但没有调用入口，就算DOM存在也不会执行绑定
• 全量阻止window的contextmenu事件副作用过大，会导致整个页面所有右键功能失效，同时仅靠JS事件拦截无法覆盖浏览器内置的长按触发逻辑，需要CSS配合禁用系统默认行为
• 现代移动浏览器默认将触摸事件设为passive模式，直接调用preventDefault会被忽略，需要显式声明passive为false

1. 新增全局CSS样式（可放在项目全局样式文件中） #

/* 禁用图片长按系统菜单 */
img.disable-long-press {
  /* 适配iOS Safari内置长按菜单 */
  -webkit-touch-callout: none;
  /* 禁用图片选中，避免连带触发菜单 */
  -webkit-user-select: none;
  user-select: none;
  /* 适配Firefox移动端长按菜单 */
  touch-callout: none;
}

2. React组件内绑定事件（不要放在index.html中） #

函数组件写法 #

import { useRef, useEffect } from 'react';

const CustomImage = ({ src, alt }) => {
  const imgRef = useRef(null);

  useEffect(() => {
    const imgNode = imgRef.current;
    if (!imgNode) return;

    // 阻止上下文菜单弹出
    const blockContextMenu = (e) => {
      e.preventDefault();
      return false;
    };
    // 吸收触摸事件避免触发系统逻辑
    const absorbTouchEvent = (e) => {
      e.preventDefault();
      e.stopPropagation();
      return false;
    };

    imgNode.addEventListener('contextmenu', blockContextMenu);
    // 必须显式指定passive: false，否则preventDefault会失效
    imgNode.addEventListener('touchstart', absorbTouchEvent, { passive: false });
    imgNode.addEventListener('touchend', absorbTouchEvent, { passive: false });

    // 组件卸载时解绑事件，防止内存泄漏
    return () => {
      imgNode.removeEventListener('contextmenu', blockContextMenu);
      imgNode.removeEventListener('touchstart', absorbTouchEvent);
      imgNode.removeEventListener('touchend', absorbTouchEvent);
    };
  }, []);

  return <img ref={imgRef} className="disable-long-press" src={src} alt={alt} />;
};

export default CustomImage;

3. 全局生效方案（如果需要禁用全站图片长按菜单） #

如果不需要针对单个图片控制，可以直接在全局入口的useEffect中绑定事件：

// App.jsx中添加
useEffect(() => {
  const blockImgContextMenu = (e) => {
    if (e.target.tagName === 'IMG') {
      e.preventDefault();
    }
  };
  window.addEventListener('contextmenu', blockImgContextMenu);
  return () => window.removeEventListener('contextmenu', blockImgContextMenu);
}, [];

再把上述CSS样式直接作用于所有img标签即可。

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