兼容

public/version.json

@@ -1 +1 @@
-{"version":1715586949926}
+{"version":1715592628330}

src/components/Metronome/Metronome.vue

@@ -32,7 +32,7 @@
           class="mycanvas"
           width="252"
           height="252"
-          @click="handleclickCanvas"
+          @click="handleEventCanvas"
         ></canvas>
         <div class="beatCon">
           <img
@@ -315,11 +315,12 @@ function speedToScalc(speed: number) {
 function scalcToSpeed(scalc: number) {
   return Math.round((scalc * 150) / 100 + 50);
 }
-const handleclickCanvas = (clickX: number, clickY: number) => {
+const handleEventCanvas = (e: MouseEvent | TouchEvent) => {
   const circle = mycanvasDom.value!.getBoundingClientRect();
   const centerX = circle.left + circle.width / 2;
   const centerY = circle.top + circle.height / 2;
-  const angle = Math.atan2(clickY - centerY, clickX - centerX);
+  const event = isTouchEvent(e) ? e.touches[0] : e;
+  const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
   const percentage = (angle * (180 / Math.PI) + 180) / 360;
   const scalc = Math.round(percentage * 100) - 25;
   speedNum.value = scalcToSpeed(scalc < 0 ? 100 + scalc : scalc);
@@ -341,11 +342,10 @@ function handleDotTouchstart() {
   document.addEventListener('touchend', onTouchend);
 }
 function onMousemove(e: MouseEvent) {
-  handleclickCanvas(e.clientX, e.clientY);
+  handleEventCanvas(e);
 }
 function onTouchmove(e: TouchEvent) {
-  const touche = e.touches[0];
-  handleclickCanvas(touche.clientX, touche.clientY);
+  handleEventCanvas(e);
 }
 // 根据百分比画圆
 function getCircleBar(steps: number) {
@@ -399,6 +399,9 @@ function getCircleBar(steps: number) {
   ctx.closePath();
   ctx.restore();
 }
+function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent {
+  return window.TouchEvent && e instanceof window.TouchEvent;
+}
 defineExpose({
   startPlay,
   pausePlay,