uni-app canvas中touchstart回调出bug

uni-app canvas中touchstart回调出bug

操作步骤：

  • 项目使用 <canvas @touchstart="touchStart"></canvas>，随便在区域内划一划，就会报错

预期结果：

  • 应该不报错

实际结果：

  • 报错

bug描述：

vue.runtime.esm.js:1443 TypeError: $event.currentTarget.getBoundingClientRect is not a function  
    at uni-h5.es.js:7390:45  
    at vue.runtime.esm.js:10214:60  
    at callWithErrorHandling (vue.runtime.esm.js:1381:19)  
    at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17)  
    at HTMLElement.invoker (vue.runtime.esm.js:10186:9)
  • 联系到了开发者，并提供了demo结果也报错，而且直接使用最简单的canvas组件，依然会出现报错：<canvas @touchstart="touchStart"></canvas>
  • 但是项目在vue2环境下是可以正常运行的

更多关于uni-app canvas中touchstart回调出bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

HBuilderX 4.15.2024050802 已修复。

更多关于uni-app canvas中touchstart回调出bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问从微信浏览器中唤醒APP获取extinfo参数ios是加密状态，安卓没有问题，这个问题怎么解决啊

感谢反馈，此问题会在4.15版本进行修复，即将发布

碰到同样的问题，4.15什么时候发布呀？

更新了，更新后确实没有问题了，点赞

请问你 控制台打印数据正常嘛

在使用 uni-app 开发时，如果在 canvas 的 touchstart 事件回调中遇到问题，可能是由于以下几个原因导致的。下面是一些常见的排查和解决方法：

1. 事件绑定问题

确保你已经正确绑定了 touchstart 事件。在 uni-app 中，你可以通过 @touchstart 或者 @touchstart.native 来绑定事件。

<canvas canvas-id="myCanvas" @touchstart="handleTouchStart"></canvas>

methods: {
  handleTouchStart(event) {
    console.log('Touch start:', event);
    // 你的逻辑代码
  }
}

2. 事件对象问题

touchstart 事件的 event 对象可能包含多个 touches，你需要确保正确处理这些触摸点。

handleTouchStart(event) {
  const touches = event.touches;
  if (touches.length > 0) {
    const touch = touches[0];
    console.log('Touch position:', touch.clientX, touch.clientY);
  }
}

3. Canvas 坐标系问题

canvas 的坐标系与页面的坐标系可能不一致，你需要将触摸点的坐标转换为 canvas 的坐标。

handleTouchStart(event) {
  const canvas = uni.createCanvasContext('myCanvas');
  const touches = event.touches;
  if (touches.length > 0) {
    const touch = touches[0];
    const x = touch.clientX;
    const y = touch.clientY;
    // 转换为 canvas 坐标
    const rect = canvas.getBoundingClientRect();
    const canvasX = x - rect.left;
    const canvasY = y - rect.top;
    console.log('Canvas position:', canvasX, canvasY);
  }
}

4. 异步问题

如果你在 touchstart 回调中执行了异步操作，确保这些操作不会导致状态不一致或未预期的行为。

handleTouchStart(event) {
  const touches = event.touches;
  if (touches.length > 0) {
    const touch = touches[0];
    // 异步操作
    setTimeout(() => {
      console.log('Async operation:', touch.clientX, touch.clientY);
    }, 100);
  }
}

5. 事件冒泡和阻止默认行为

如果你不希望事件冒泡或阻止默认行为，可以在回调中调用 event.stopPropagation() 或 event.preventDefault()。

handleTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  // 你的逻辑代码
}

6. 调试工具

使用 console.log 或 debugger 来调试你的代码，确保事件被正确触发，并且所有变量的值都符合预期。

7. 兼容性问题

确保你的代码在目标平台上兼容。某些平台（如小程序）可能会有一些限制或不同的行为。

8. Canvas 上下文问题

确保 canvas 上下文在 touchstart 事件中可用。你可以通过 uni.createCanvasContext 来获取上下文。

handleTouchStart(event) {
  const canvas = uni.createCanvasContext('myCanvas');
  // 使用 canvas 上下文进行绘制或其他操作
}
回到顶部