在验证签名时（请参阅演示视频），在平板电脑/移动设备上，onClick不会触发onSet()函数，但在计算机上有效。 在平板电脑/移动设备上，onClick仅在按钮外部有效。

我希望在平板电脑/移动设备上，onClick能够触发函数。

演示视频：https://streamable.com/lujzg0

项目：https://hh8n2j.csb.app/（沙盒）

DraggableSignature：

   

 //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}`,
        },
        controls: {
          position: "absolute",
          right: 0,
          display: "inline-block",
          backgroundColor: primary45,
          // borderRadius: 4,
        },
        smallButton: {
          display: "inline-block",
          cursor: "pointer",
          padding: 4,
        },
      };
      return (
        <Draggable onStop={onEnd}>
          <div style={styles.container}>
            <div style={styles.controls}>
              <button style={styles.smallbutton} onClick={onSet}>
                <FaCheck color={goodColor} />
              </button>
              <button style={styles.smallbutton} onClick={onCancel}>
                <FaTimes color={errorColor} />
              </button>
            </div>
            <img
              alt="signature"
              src={url}
              width={200}
              style={styles.img}
              draggable={false}
            />
          </div>
        </Draggable>
        
      );
    }

{signatureURL ? (
                <DraggableSignature
                  url={signatureURL}
                  onCancel={() => {
                    setSignatureURL(null);
                  }}
                  onSet={async () => {
                    const { originalHeight, originalWidth } = pageDetails;
                    const scale =
                      originalWidth / documentRef.current.clientWidth;

                    const y =
                      documentRef.current.clientHeight -
                      (position.y -
                        position.offsetY +
                        64 -
                        documentRef.current.offsetTop);
                    const x =
                      position.x -
                      160 -
                      position.offsetX -
                      documentRef.current.offsetLeft;

                    // new XY in relation to actual document size
                    const newY =
                      (y * originalHeight) / documentRef.current.clientHeight;
                    const newX =
                      (x * originalWidth) / documentRef.current.clientWidth;

                    const pdfDoc = await PDFDocument.load(pdf);

                    const pages = pdfDoc.getPages();
                    const firstPage = pages[pageNum];

                    const pngImage = await pdfDoc.embedPng(signatureURL);
                    const pngDims = pngImage.scale(scale * 0.3);

                    firstPage.drawImage(pngImage, {
                      x: newX,
                      y: newY,
                      width: pngDims.width,
                      height: pngDims.height,
                    });

                    if (autoDate) {
                      firstPage.drawText(
                        `Signé électroniquement le :${dayjs().format(
                          "DD/MM/YYYY à HH:mm:ss"
                        )}`,
                        {
                          x: newX,
                          y: newY - 10,
                          size: 14 * scale,
                          color: rgb(0.074, 0.545, 0.262),
                        }
                      );
                    }

                    const pdfBytes = await pdfDoc.save();
                    const blob = new Blob([newUint8Array(pdfBytes)]);

                    const URL = await blobToURL(blob);
                    setPdf(URL);
                    setPosition(null);
                    setSignatureURL(null);
                  }}
                  onEnd={setPosition}
                />
              ) : null}

谢谢

我将onClick更改为onTouchtart，我更改了按钮位置，我使用了另一个CSS库。