OnClick이 모바일의 React JS에서 작동하지 않습니다.

Question

서명을 확인할 때(데모 동영상 참조) onClick은 태블릿/모바일에서는 onSet() 함수를 실행하지 않지만 컴퓨터에서는 작동합니다. 태블릿/모바일에서는 onClick이 버튼 외부에서만 작동합니다.

태블릿/모바일 기기에서 onClick 기능을 실행하고 싶습니다.

데모 영상: https://streamable.com/lujzg0

프로젝트: https://hh8n2j.csb.app/(샌드박스)

드래그 가능한 서명:

 //DraggableSignature.js
    "react-draggable"에서 드래그 가능을 가져옵니다.
    "react-icons/fa"에서 { FaCheck, FaTimes }를 가져옵니다.
    "../utils/colors"에서 import { errorColor, goodColor, Primary45 };

    기본 함수 내보내기 DraggableSignature({ url, onEnd, onSet, onCancel }) {
      const 스타일 = {
        컨테이너: {
          위치: "절대",
          z인덱스: 100000,
          테두리: `2px 솔리드 ${primary45}`,
        },
        제어: {
          위치: "절대",
          오른쪽: 0,
          디스플레이: "인라인 블록",
          배경색상: 기본45,
          // borderRadius: 4,
        },
        작은버튼: {
          디스플레이: "인라인 블록",
          커서: "포인터",
          패딩: 4,
        },
      };
      반품 (
        <드래그 가능한 onStop={onEnd}>
          <div style={styles.container}>
            <div style={styles.controls}>
              <버튼 스타일={styles.smallbutton} onClick={onSet}>
                <FaCheck color={goodColor} />
              </버튼>
              <버튼 스타일={styles.smallbutton} onClick={onCancel}>
                <FaTimes color={errorColor} />
              </버튼>
            </div>
            <img
              alt="서명"
              소스={url}
              너비={200}
              스타일={styles.img}
              드래그 가능={false}
            />
          </div>
        </드래그 가능>
        
      );
    }

App.js：

{signatureURL ? (
                <드래그 가능서명
                  url={서명URL}
                  onCancel={() => {
                    setSignatureURL(null);
                  }}
                  onSet={async () => {
                    const {originHeight,originWidth } = pageDetails;
                    const 스케일 =
                      OriginalWidth / documentRef.current.clientWidth;

                    const y =
                      documentRef.current.clientHeight -
                      (위치.y -
                        위치.오프셋Y +
                        64 -
                        documentRef.current.offsetTop);
                    const x =
                      위치.x -
                      160 -
                      위치.오프셋X -
                      documentRef.current.offsetLeft;

                    // 실제 문서 크기와 관련된 새로운 XY
                    const newY =
                      (y * 원본 높이) / documentRef.current.clientHeight;
                    const newX =
                      (x * originalWidth) / documentRef.current.clientWidth;

                    const pdfDoc = PDFDocument.load(pdf)를 기다립니다;

                    const 페이지 = pdfDoc.getPages();
                    const firstPage = 페이지[pageNum];

                    const pngImage = pdfDoc.embedPng(signatureURL)을 기다립니다;
                    const pngDims = pngImage.scale(scale * 0.3);

                    firstPage.drawImage(pngImage, {
                      x: 새로운X,
                      y: 새로운Y,
                      너비: pngDims.width,
                      높이: pngDims.height,
                    });

                    if (autoDate) {
                      첫페이지.drawText(
                        `Signé électroniquement le :${dayjs().format(
                          "DD/MM/YYYY à HH:mm:ss"
                        )}`,
                        {
                          x: 새로운X,
                          y: newY - 10,
                          크기: 14 * 규모,
                          색상: rgb(0.074, 0.545, 0.262),
                        }
                      );
                    }

                    const pdfBytes = pdfDoc.save()를 기다립니다;
                    const blob = new Blob([newUint8Array(pdfBytes)]);

                    const URL = blobToURL(blob)을 기다립니다;
                    setPdf(URL);
                    setPosition(null);
                    setSignatureURL(null);
                  }}
                  onEnd={setPosition}
                />
              ) : 없는}

감사합니다

onClick을 onTouchtart로 변경하고, 버튼 위치를 변경하고, 다른 CSS 라이브러리를 사용했습니다.

Answer 1

onTouchStart 이벤트를 추가하고 버튼을 div 구성 요소로 변경하고 버튼 스타일로 스타일을 지정해 보세요