如何实现桌面端双击、手机端单击卡片触发打开操作

核心逻辑很简单，根据当前视口宽度区分设备类型，给卡片分别绑定对应触发事件即可，不需要额外引入复杂的手势库。

具体实现 #

• 先做设备类型判断：以行业通用的768px宽度为移动端/桌面端分界点，监听窗口resize事件实时更新当前设备状态，断点可以和你项目自身的响应式规则对齐。
• 按需绑定事件：桌面端保留原有的onDoubleClick双击逻辑，移动端单独绑定onClick单击事件，不要在同端同时绑定两个事件避免触发冲突。
• 补交互优化：给卡片加上touch-action: manipulation样式，去掉移动端浏览器默认的300ms点击延迟、双击缩放的默认行为，让点击操作更跟手。

修正后的完整代码如下（顺便修复了你原代码里Card标签属性多写了一个右花括号的语法问题）：

import { useState, useEffect } from 'react';
import { Grid, Card } from '@mui/material';

// 组件内部
const [isMobile, setIsMobile] = useState(false);

// 初始化+监听视口变化
useEffect(() => {
  const judgeDevice = () => setIsMobile(window.innerWidth < 768);
  judgeDevice();
  window.addEventListener('resize', judgeDevice);
  return () => window.removeEventListener('resize', judgeDevice);
}, []);

// 模板渲染部分
<Grid item xs={2} key={keyId}>
  <Card 
    xs={12}
    sx={{ touchAction: 'manipulation' }}
    {...(isMobile 
      ? { onClick: () => addProject(projname) }
      : { onDoubleClick: () => addProject(projname) }
    )}
  >
    {/* 你原有的卡片内部内容 */}
  </Card>
</Grid>

如果你项目里已经在用UI库自带的响应式断点hook（比如MUI的useMediaQuery、Ant Design的useBreakpoint），可以直接替换上面手写的视口监听逻辑，保证全站断点规则统一。
不要尝试在移动端同时绑定单击、双击事件做延迟判断，300ms的等待阈值会让单击交互变卡，体验很差。

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