서명을 확인할 때(데모 동영상 참조) 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}> 
 
 <버튼 스타일={styles.smallbutton} onClick={onSet}>   <버튼 스타일={styles.smallbutton} onClick={onCancel}>   
  
  ); }

{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 라이브러리를 사용했습니다.