モバイル上の React JS で OnClick が機能しない

Question

署名を検証するとき (デモ ビデオを参照)、onClick はタブレット/モバイルでは onSet() 関数を起動しませんが、コンピュータでは動作します。 タブレット/モバイルでは、onClick はボタンの外側でのみ機能します。

タブレット/モバイル デバイスで onClick 関数をトリガーしたいと考えています。

デモビデオ: https://streamable.com/lujzg0

プロジェクト: https://hh8n2j.csb.app/ (サンドボックス)

ドラッグ可能な署名:

 //DraggableSignature.js
    「react-draggable」からドラッグ可能をインポートします。
    import { FaCheck, FaTimes } から "react-icons/fa";
    import { errorColor、goodColor、primary4​​5 } from "../utils/colors";

    デフォルト関数をエクスポート DraggableSignature({ url, onEnd, onSet, onCancel }) {
      const スタイル = {
        容器： {
          位置: "絶対"、
          zインデックス: 100000、
          ボーダー: `2px ソリッド ${primary4​​5}`、
        }、
        コントロール: {
          位置: "絶対"、
          右: 0、
          表示: "インラインブロック",
          背景色: プライマリ 45、
          // 境界半径: 4,
        }、
        小さなボタン: {
          表示: "インラインブロック",
          カーソル: "ポインタ"、
          パディング: 4、
        }、
      };
      戻る （
        <ドラッグ可能 onStop={onEnd}>
          <div style={styles.container}>
            <div style={styles.controls}>
              <ボタン スタイル={styles.smallbutton} onClick={onSet}>
                <FaCheck color={goodColor} />
              </ボタン>
              <ボタン スタイル={styles.smallbutton} onClick={onCancel}>
                <FaTimes color={errorColor} />
              </ボタン>
            </div>
            <画像
              alt="署名"
              src={url}
              幅={200}
              style={styles.img}
              ドラッグ可能={false}
            />
          </div>
        </ドラッグ可能>
        
      );
    }

App.js：

{signatureURL ? (
                <ドラッグ可能な署名
                  url={署名URL}
                  onCancel={() => {
                    setSignatureURL(null);
                  }}
                  onSet={async () => {
                    const {originalHeight,originalWidth} = ページ詳細;
                    定数スケール =
                      オリジナル幅 / documentRef.current.clientWidth;

                    定数y =
                      documentRef.current.clientHeight -
                      (位置.y -
                        位置.オフセットY
                        64 -
                        documentRef.current.offsetTop);
                    定数 x =
                      位置.x -
                      160 -
                      位置.オフセットX -
                      documentRef.current.offsetLeft;

                    // 実際のドキュメント サイズに応じた新しい XY
                    const newY =
                      (y * オリジナルの高さ) / documentRef.current.clientHeight;
                    const newX =
                      (x *originalWidth) / documentRef.current.clientWidth;

                    const pdfDoc = PDFDocument.load(pdf) を待ちます。

                    const ページ = pdfDoc.getPages();
                    const firstPage = ページ[ページ番号];

                    const pngImage = await pdfDoc.embedPng(signatureURL);
                    const pngDims = pngImage.scale(scale * 0.3);

                    firstPage.drawImage(pngImage, {
                      x: 新しいX、
                      y: 新しいY、
                      幅: pngDims.width、
                      高さ: pngDims.height,
                    });

                    if (autoDate) {
                      firstPage.drawText(
                        `電子ファイルの署名:${dayjs().format(
                          「DD/MM/YYYY à HH:mm:ss」
                        )}`、
                        {
                          x: 新しいX、
                          y: 新しいY - 10、
                          サイズ: 14 * スケール、
                          カラー: 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={セット位置}
                />
              ） ： ヌル}

ありがとうございます

onClick を onTouchtart に変更し、ボタンの位置を変更し、別の CSS ライブラリを使用しました。

Answer 1

onTouchStart イベントを追加して、ボタンを div コンポーネントに変更し、そのスタイルをボタン スタイルに設定してみてください。