<p>Lors de la vérification de la signature (voir vidéo de démonstration), onClick ne déclenche pas la fonction onSet() sur tablette/mobile, mais fonctionne sur ordinateur. Sur tablette/mobile, onClick ne fonctionne qu'en dehors du bouton. </p> <p>Je souhaite qu'onClick déclenche la fonction sur les tablettes/appareils mobiles. </p> <p>Vidéo de démonstration : https://streamable.com/lujzg0</p> <p>Projet : https://hh8n2j.csb.app/ (bac à sable)</p> <p><strong>DraggableSignature : </strong> <pre class="brush:js;toolbar:false;"> //DraggableSignature.js importer Draggable depuis "react-draggable" ; importer { FaCheck, FaTimes } depuis "react-icons/fa" ; importer { errorColor, goodColor, Primary45 } depuis "../utils/colors" ; exporter la fonction par défaut DraggableSignature({ url, onEnd, onSet, onCancel }) { styles const = { récipient: { position : "absolue", zIndice : 100 000, bordure : `2px solid ${primary45}`, }, contrôles: { position : "absolue", à droite : 0, affichage : "bloc-en-ligne", Couleur d'arrière-plan : primaire45, // borderRadius : 4, }, petitBouton : { affichage : "bloc-en-ligne", curseur : "pointeur", rembourrage : 4, }, } ; retour ( <Déplaçable onStop={onEnd}> <div style={styles.container}> <div style={styles.controls}> <button style={styles.smallbutton} onClick={onSet}> <FaCheck color={goodColor} /> </bouton> <button style={styles.smallbutton} onClick={onCancel}> <FaTimes color={errorColor} /> </bouton> </div> <img alt="signature" src={url} largeur={200} style={styles.img} déplaçable={false} /> </div> </Déplaçable> ); }</pré> <strong>App.js：</strong><p><br /></p> <pre class="brush:js;toolbar:false;">{signatureURL ? ( <DraggableSignature url={signatureURL} onCancel={() => { setSignatureURL(null); }} onSet={async () => { const { originalHeight, originalWidth } = pageDetails ; échelle constante = 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; // nouveau XY par rapport à la taille réelle du document const nouveauY = (y * originalHeight) / documentRef.current.clientHeight; const nouveauX = (x * originalWidth) / documentRef.current.clientWidth ; const pdfDoc = attendre PDFDocument.load(pdf); const pages = pdfDoc.getPages(); const firstPage = pages[pageNum]; const pngImage = wait pdfDoc.embedPng(signatureURL); const pngDims = pngImage.scale(échelle * 0,3); firstPage.drawImage(pngImage, { x : nouveauX, y : nouveauY, largeur : pngDims.width, hauteur : pngDims.hauteur, }); si (date automatique) { firstPage.drawText( `Signé électroniquement le :${dayjs().format( "JJ/MM/AAAA à HH:mm:ss" )}`, { x : nouveauX, y : nouveauY - 10, taille: 14 * échelle, couleur : RVB (0,074, 0,545, 0,262), } ); } const pdfBytes = attendre pdfDoc.save(); const blob = nouveau Blob([newUint8Array(pdfBytes)]); const URL = attendre blobToURL(blob); setPdf(URL); setPosition(null); setSignatureURL(null); }} onEnd={setPosition} /> ) : nul}≪/pré> <p>Merci</p> <p>J'ai changé onClick en onTouchtart, j'ai changé la position du bouton, j'ai utilisé une autre bibliothèque CSS. </p>