OnClick funktioniert in React JS auf Mobilgeräten nicht
P粉342101652
P粉342101652 2023-08-18 11:58:16
0
1
381

Bei der Überprüfung der Signatur (siehe Demo-Video) löst onClick die Funktion onSet() nicht auf Tablets/mobilen Geräten aus, funktioniert aber auf Computern. Auf Tablets/Mobilgeräten funktioniert onClick nur außerhalb der Schaltfläche.

Ich möchte, dass die onClick-Funktion auf Tablets/Mobilgeräten ausgelöst wird.

Demovideo: https://streamable.com/lujzg0

Projekt: https://hh8n2j.csb.app/ (Sandbox)

DraggableSignature:

 //DraggableSignature.js import Draggable aus „react-draggable“; import { FaCheck, FaTimes } aus „react-icons/fa“; import { errorColor, goodColor, Primary45 } from "../utils/colors"; Standardfunktion exportieren DraggableSignature({ url, onEnd, onSet, onCancel }) { const Styles = { Container: { Position: „absolut“, zIndex: 100000, Grenze: `2px solid ${primary45}`, }, Steuerelemente: { Position: „absolut“, rechts: 0, Anzeige: „inline-block“, Hintergrundfarbe: primär45, // borderRadius: 4, }, smallButton: { Anzeige: „inline-block“, Cursor: „Zeiger“, Polsterung: 4, }, }; zurückkehren (  
Signatur
); }
App.js:


{signatureURL ? (  { setSignaturURL(null); }} onSet={async () => { const { originalHeight, originalWidth } = pageDetails; const Skala = 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; // neues XY im Verhältnis zur tatsächlichen Dokumentgröße const newY = (y * originalHeight) / documentRef.current.clientHeight; const newX = (x * originalWidth) / documentRef.current.clientWidth; const pdfDoc = waiting PDFDocument.load(pdf); const seiten = pdfDoc.getPages(); const firstPage = seiten[pageNum]; const pngImage = waiting pdfDoc.embedPng(signatureURL); const pngDims = pngImage.scale(scale * 0.3); firstPage.drawImage(pngImage, { x: newX, y: neuY, Breite: pngDims.width, Höhe: pngDims.height, }); if (autoDate) { firstPage.drawText( `Signé électroniquement le :${dayjs().format( „TT/MM/JJJJ à HH:mm:ss“ )}`, { x: newX, y: neuY - 10, Größe: 14 * Skala, Farbe: RGB (0,074, 0,545, 0,262), } ); } const pdfBytes = waiting pdfDoc.save(); const blob = new Blob([newUint8Array(pdfBytes)]); const URL = waiting blobToURL(blob); setPdf(URL); setPosition(null); setSignaturURL(null); }} onEnd={setPosition} /> ) : Null}

Vielen Dank

Ich habe onClick in onTouchtart geändert, ich habe die Schaltflächenposition geändert und ich habe eine andere CSS-Bibliothek verwendet.

P粉342101652
P粉342101652

Antworte allen (1)
P粉327903045

尝试添加onTouchStart事件,并将按钮更改为div组件,并将其样式设置为按钮样式

    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!