OnClick funktioniert in React JS auf Mobilgeräten nicht

Question

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 (
        <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="Signatur"
              src={url}
              width={200}
              style={styles.img}
              draggable={false}
            />
          </div>
        </Draggable>
        
      );
    }

App.js:

{signatureURL ? (
                <DraggableSignature
                  url={signaturURL}
                  onCancel={() => {
                    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.

Answer 1

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