Apabila mengesahkan tandatangan (lihat video demo), onClick tidak menyalakan fungsi onSet() pada tablet/peranti mudah alih, tetapi berfungsi pada komputer. Pada tablet/mudah alih, onClick hanya berfungsi di luar butang.

Saya mahu fungsi onClick dicetuskan pada tablet/peranti mudah alih.

Video demo: https://streamable.com/lujzg0

Projek: https://hh8n2j.csb.app/ (Kotak Pasir)

DraggableSignature:

 //DraggableSignature.js import Boleh Seret daripada "boleh seret bertindak balas"; import { FaCheck, FaTimes } daripada "react-icons/fa"; import { errorColor, goodColor, primary45 } daripada "../utils/colors"; eksport fungsi lalai DraggableSignature({ url, onEnd, onSet, onCancel }) { gaya const = { bekas: { kedudukan: "mutlak", zIndex: 100000, sempadan: `2px pepejal ${primary45}`, }, kawalan: { kedudukan: "mutlak", kanan: 0, paparan: "blok sebaris", Warna latar belakang: primary45, // jejari sempadan: 4, }, Butang kecil: { paparan: "blok sebaris", kursor: "penunjuk", pelapik: 4, }, }; kembali (  
 
       
  
  ); }

{signatureURL ? (  { setSignatureURL(null); }} onSet={async () => { const { originalHeight, originalWidth } = pageDetails; skala const = originalWidth / documentRef.current.clientWidth; const y = documentRef.current.clientHeight - (kedudukan.y - kedudukan.offsetY + 64 - documentRef.current.offsetTop); const x = kedudukan.x - 160 - position.offsetX - documentRef.current.offsetLeft; // XY baharu berhubung dengan saiz dokumen sebenar const newY = (y * originalHeight) / documentRef.current.clientHeight; const newX = (x * originalWidth) / documentRef.current.clientWidth; const pdfDoc = tunggu PDFDocument.load(pdf); halaman const = pdfDoc.getPages(); const firstPage = pages[pageNum]; const pngImage = tunggu pdfDoc.embedPng(signatureURL); const pngDims = pngImage.scale(skala * 0.3); firstPage.drawImage(pngImage, { x: baruX, y: baruY, lebar: pngDims.width, ketinggian: pngDims.height, }); if (autoDate) { firstPage.drawText( `Signé électroniquement le :${dayjs().format( "DD/MM/YYYY à HH:mm:ss" )}`, { x: baruX, y: baruY - 10, saiz: 14 * skala, warna: rgb(0.074, 0.545, 0.262), } ); } const pdfBytes = tunggu pdfDoc.save(); const blob = new Blob([newUint8Array(pdfBytes)]); const URL = tunggu blobToURL(blob); setPdf(URL); setPosition(null); setSignatureURL(null); }} onEnd={setPosition} /> ): null} 
Terima kasih
 
Saya menukar onClick kepada onTouchtart, saya menukar kedudukan butang, saya menggunakan perpustakaan CSS yang lain.