NextJS聊天应用自定义上下文菜单移动端失效求助

核心问题根源 #

iPhone长按消息会触发系统默认的文本选择行为，直接干扰自定义菜单的触发逻辑；同时移动端没有右键事件，仅靠onContextMenu和onClick无法覆盖长按交互场景。

具体修改方案 #

1. 禁用默认文本选择
   给消息容器添加CSS样式，阻止Safari/iPhone的默认文本选中行为：

.message-item {
  user-select: none;
  -webkit-user-select: none; /* 针对iOS Safari的兼容写法 */
}

2. 同时适配桌面右键与移动端长按
   在消息组件中，通过onContextMenu处理桌面右键，同时用原生触摸事件实现长按检测，统一触发菜单逻辑：

import { useState, useRef, useEffect } from 'react';

const MessageItem = ({ message, onPin, onFavorite, onDelete }) => {
  const [showMenu, setShowMenu] = useState(false);
  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 });
  const longPressTimer = useRef(null);

  // 通用的菜单打开逻辑
  const triggerMenu = (e) => {
    e.preventDefault(); // 阻止右键/触摸的默认行为
    // 根据事件类型获取坐标
    const posX = e.type === 'contextmenu' ? e.pageX : e.touches[0].pageX;
    const posY = e.type === 'contextmenu' ? e.pageY : e.touches[0].pageY;
    setMenuPos({ x: posX, y: posY });
    setShowMenu(true);
  };

  // 移动端长按触发
  const handleTouchStart = (e) => {
    // 500ms作为长按阈值，可按需调整
    longPressTimer.current = setTimeout(() => triggerMenu(e), 500);
  };

  // 触摸结束/中断时清除定时器，避免误触发
  const handleTouchEnd = () => {
    clearTimeout(longPressTimer.current);
  };

  // 点击页面其他区域关闭菜单
  const handleOutsideClick = (e) => {
    if (!e.target.closest('.message-item') && !e.target.closest('.context-menu')) {
      setShowMenu(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleOutsideClick);
    return () => document.removeEventListener('click', handleOutsideClick);
  }, []);

  return (
    <div
      className="message-item"
      onContextMenu={triggerMenu}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchEnd}
    >
      <p>{message.content}</p>
      
      {showMenu && (
        <div
          className="context-menu"
          style={{
            position: 'absolute',
            top: menuPos.y,
            left: menuPos.x,
            background: '#fff',
            border: '1px solid #e0e0e0',
            borderRadius: '6px',
            padding: '8px 0',
            minWidth: '120px',
            zIndex: 1000,
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          }}
        >
          <button 
            style={{ width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer' }}
            onClick={() => { onPin(message.id); setShowMenu(false); }}
          >
            置顶
          </button>
          <button 
            style={{ width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer' }}
            onClick={() => { onFavorite(message.id); setShowMenu(false); }}
          >
            收藏
          </button>
          <button 
            style={{ width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'transparent', cursor: 'pointer', color: '#ff4444' }}
            onClick={() => { onDelete(message.id); setShowMenu(false); }}
          >
            删除
          </button>
        </div>
      )}
    </div>
  );
};

export default MessageItem;

3. 关键注意点

• 长按阈值（500ms）可根据产品需求调整，平衡误触率与交互响应速度
• 必须处理touchCancel事件，避免用户长按过程中滑动离开仍触发菜单
• 全局点击关闭菜单的逻辑要排除消息元素和菜单本身，防止误关闭

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