<p>When verifying the signature (see demo video), onClick does not fire the onSet() function on tablet/mobile, but works on computer. On tablet/mobile, onClick only works outside the button. </p> <p>I want the onClick function to trigger on tablets/mobile devices. </p> <p>Demo video: https://streamable.com/lujzg0</p> <p>Project: https://hh8n2j.csb.app/ (Sandbox)</p> <p><strong>DraggableSignature: </strong> </p> <pre class="brush:js;toolbar:false;"> //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> ); }</pre> <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; 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}</pre> <p>Thank you</p> <p>I changed onClick to onTouchtart, I changed the button position, I used another CSS library. </p>