在移动设备上，OnClick在React JS中不起作用
P粉342101652
2023-08-18 11:58:16
<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>
</Draggable>
);
}</pre>
<strong>App.js：</strong><p><br /></p>
<pre class="brush:js;toolbar:false;">{signatureURL ? (
<DraggableSignature
url={signatureURL}
onCancel={() => {
setSignatureURL(null);
}}
onSet={async () => {
const { originalHeight, originalWidth } = pageDetails;
const scale =
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;
// new XY in relation to actual document size
const newY =
(y * originalHeight) / documentRef.current.clientHeight;
const newX =
(x * originalWidth) / documentRef.current.clientWidth;
const pdfDoc = await PDFDocument.load(pdf);
const pages = pdfDoc.getPages();
const firstPage = pages[pageNum];
const pngImage = await pdfDoc.embedPng(signatureURL);
const pngDims = pngImage.scale(scale * 0.3);
firstPage.drawImage(pngImage, {
x: newX,
y: newY,
width: pngDims.width,
height: pngDims.height,
});
if (autoDate) {
firstPage.drawText(
`Signé électroniquement le :${dayjs().format(
"DD/MM/YYYY à HH:mm:ss"
)}`,
{
x: newX,
y: newY - 10,
size: 14 * scale,
color: 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={setPosition}
/>
) : null}
</pre>
<p>谢谢</p>
<p>我将onClick更改为onTouchtart，我更改了按钮位置，我使用了另一个CSS库。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
尝试添加onTouchStart事件，并将按钮更改为div组件，并将其样式设置为按钮样式