如何仅在PWA的standalone模式下禁用图片长按触发的右键菜单功能

核心实现思路 #

• 先判断当前PWA是否运行在standalone独立模式下，非该模式下不注册禁用逻辑，保证桌面端正常使用右键功能
• 监听contextmenu事件时可指定仅针对图片元素阻止默认行为，不影响页面其他元素的右键菜单使用
• 在React生命周期钩子中正确注册、销毁事件监听，避免内存泄漏

代码实现 #

首先封装多平台兼容的standalone模式判断方法：

const isStandalone = () => {
  return window.matchMedia('(display-mode: standalone)').matches 
    || window.navigator.standalone // 兼容iOS端PWA的模式判断
}

将以下逻辑放在项目根组件中，即可全局生效：

import { useEffect } from 'react'

function RootApp() {
  useEffect(() => {
    // 非standalone模式直接跳过，不注册监听
    if (!isStandalone()) return

    const preventImgContextMenu = (e) => {
      // 仅阻止图片元素的右键菜单触发
      if (e.target.tagName.toLowerCase() === 'img') {
        e.preventDefault()
      }
    }

    window.addEventListener('contextmenu', preventImgContextMenu)
    // 组件卸载时移除监听，避免副作用
    return () => window.removeEventListener('contextmenu', preventImgContextMenu)
  }, [])

  return {/* 你的应用根组件内容 */}
}

如果你需要在standalone模式下禁用所有元素的右键菜单，直接删除preventImgContextMenu函数内的图片标签判断逻辑，统一执行e.preventDefault()即可。

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