在行動裝置上，OnClick在React JS中不起作用

Question

<p>在驗證簽名時（請參閱示範影片），在平板電腦/行動裝置上，onClick不會觸發onSet()函數，但在電腦上有效。 在平板電腦/行動裝置上，onClick僅在按鈕外部有效。 </p> <p>我希望在平板電腦/行動裝置上，onClick能夠觸發函數。 </p> <p>示範影片：https://streamable.com/lujzg0</p> <p>專案：https://hh8n2j.csb.app/（砂盒）</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, primary4​​5 } from "../utils/colors"; export default function DraggableSignature({ url, onEnd, onSet, onCancel }) { const styles = { container: { position: "absolute", zIndex: 100000, border: `2px solid ${primary4​​5}`, }, controls: { position: "absolute", right: 0, display: "inline-block", backgroundColor: primary4​​5, // 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> </可拖曳> ）； }</pre> <strong>App.js：</strong><p><br /></p>

{signatureURL ? （
                <可拖曳簽名
                  url={簽章URL}
                  onCancel={() =>; {
                    setSignatureURL(空);
                  }}
                  onSet={async()=>; {
                    const { 原始高度, 原始寬度 } = 頁面詳細資料;
                    常量尺度 =
                      原始寬度 / documentRef.current.clientWidth;

                    常數 y =
                      documentRef.current.clientHeight -
                      （位置.y -
                        位置.偏移Y
                        64 -
                        documentRef.current.offsetTop);
                    常數 x =
                      位置.x -
                      160 -
                      位置.offsetX -
                      documentRef.current.offsetLeft;

                    // 相對於實際文件大小的新 XY
                    常量新Y =
                      (y * 原始高度) / documentRef.current.clientHeight;
                    常量新X =
                      (x * 原始寬度) / documentRef.current.clientWidth;

                    const pdfDoc = 等待 PDFDocument.load(pdf);

                    const 頁面 = pdfDoc.getPages();
                    const 第一頁 = 頁數[頁數];

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

                    第一頁.drawImage(pngImage, {
                      x：新X，
                      y：新Y，
                      寬度：pngDims.width，
                      高度：pngDims.height，
                    });

                    如果（自動日期）{
                      第一頁.drawText(
                        `電子簽名：${dayjs().format(
                          “日/月/年 à HH:mm:ss”
                        )}`,
                        {
                          x：新X，
                          y：新Y - 10，
                          尺寸：14 * 比例，
                          顏色：RGB（0.074，0.545，0.262），
                        }
                      ）；
                    }

                    const pdfBytes = 等待 pdfDoc.save();
                    const blob = new Blob([newUint8Array(pdfBytes)]);

                    const URL = 等待 blobToURL(blob);
                    設定Pdf（網址）；
                    設定位置（空）；
                    setSignatureURL(空);
                  }}
                  onEnd={設定位置}
                >>
              ） ： 無效的}</pre>
<p>謝謝</p>
<p>我將onClick更改為onTouchtart，我更改了按鈕位置，我使用了另一個CSS庫。 </p>

Answer 1

嘗試新增onTouchStart事件，並將按鈕變更為div元件，並將其樣式設定為按鈕樣式