解决 React 中移动端 onClick 事件失效问题的完整方案

这不是“降级”，而是提升跨端鲁棒性的标准实践。关键在于：确保所有交互元素对 touch 和 mouse 事件均显式响应，且不依赖浏览器默认可点击行为。

以下是优化后的 DraggableSignature.js 核心片段（已修复）：

Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

下载

// DraggableSignature.js（优化版）
import Draggable from "react-draggable";
import { FaCheck, FaTimes } from "react-icons/fa";
import { errorColor, goodColor, primary45 } from "../utils/colors";

export default function DraggableSignature({ url, onEnd, onSet, onCancel }) {
  const styles = {
    container: {
      position: "absolute",
      zIndex: 100000,
      border: `2px solid ${primary45}`,
      // 防止触摸穿透
      WebkitTapHighlightColor: "transparent",
    },
    controls: {
      position: "absolute",
      right: 0,
      display: "flex", // 推荐 flex 替代 inline-block，更可控
      backgroundColor: primary45,
      borderRadius: "4px", // 视觉一致性
      overflow: "hidden",
    },
    actionIcon: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      width: "36px",
      height: "36px",
      cursor: "pointer",
      userSelect: "none", // 禁止文本选中干扰
      transition: "background-color 0.15s",
      // 显式启用 pointer events（防御性写法）
      pointerEvents: "auto",
    },
    actionIconHover: {
      backgroundColor: "#e0e0e0",
    },
  };

  // 封装统一的点击处理函数，避免重复逻辑
  const handleTouchOrClick = (handler) => (e) => {
    e.preventDefault(); // 阻止默认行为（如滚动、缩放）
    e.stopPropagation(); // 防止事件冒泡至 Draggable 容器
    handler?.();
  };

  return (
    <Draggable onStop={onEnd}>
      <div style={styles.container}>
        <div style={styles.controls}>
          {/* ✅ 使用 div + role="button" 保证语义与可访问性 */}
          <div
            role="button"
            tabIndex={0}
            aria-label="确认签名"
            style={{
              ...styles.actionIcon,
              ...(isHovered ? styles.actionIconHover : {}),
            }}
            onClick={handleTouchOrClick(onSet)}
            onTouchStart={handleTouchOrClick(onSet)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                onSet?.();
              }
            }}
          >
            <FaCheck color={goodColor} size={18} />
          </div>
          <div
            role="button"
            tabIndex={0}
            aria-label="取消签名"
            style={{
              ...styles.actionIcon,
              ...(isHovered ? styles.actionIconHover : {}),
            }}
            onClick={handleTouchOrClick(onCancel)}
            onTouchStart={handleTouchOrClick(onCancel)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                onCancel?.();
              }
            }}
          >
            <FaTimes color={errorColor} size={18} />
          </div>
        </div>
        @@##@@
      </div>
    </Draggable>
  );
}

? 关键优化点说明：

• + role="button" + tabIndex={0}：保持键盘导航与屏幕阅读器兼容性，语义等价于