在移动设备上，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, 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> </可拖动> ）； }</pre> <strong>App.js：</strong><p><br /></p>

{signatureURL ? （
                <可拖动签名
                  url={签名URL}
                  onCancel={() =>; {
                    setSignatureURL(空);
                  }}
                  onSet={async()=>; {
                    const { 原始高度, 原始宽度 } = 页面详细信息;
                    常量尺度 =
                      原始宽度 / documentRef.current.clientWidth;

                    常量 y =
                      documentRef.current.clientHeight -
                      （位置.y -
                        位置.offsetY +
                        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组件，并将其样式设置为按钮样式