uni-app中uni-canvas在H5上没有touch事件响应

项目属性	信息
产品分类	uniapp/H5
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	14.0 (23A344)
HBuilderX类型	正式
HBuilderX版本号	3.98
浏览器平台	Chrome
浏览器版本	版本 119.0.6045.159（正式版本） (x86_64)
项目创建方式	HBuilderX

示例代码：

<u-popup v-model="showPop" mode="center" border-radius="14" :closeable="true">
<view class="pop">  
    <canvas canvas-id="handWriting" id="handWriting" class="pop-sign" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"  
             @touchend="uploadScaleEnd" @tap="mouseDown"  >  
     </canvas>  

           <view class="u-row sign-btn-box">  
               <button @click="retDraw" class="delBtn">重写</button>  
               <button @click="subCanvas" class="subBtn">保存</button>     
           </view>  
</view>  
```

methods: { uploadScaleStart(event){ that.isWrite = true that.handwriting.uploadScaleStart(event) }, uploadScaleMove(event){ that.handwriting.uploadScaleMove(event) }, uploadScaleEnd(event){ that.handwriting.uploadScaleEnd(event) }, mouseDown(e){ console.log(‘mouseDown’,e); } }

操作步骤：

H5浏览器打开签名界面可以画布 touch 事件

从附件1 可以看到在小程序中 uniapp 中的canvas 是有 touch 事件绘制及响应的，但是在H5 uni-canvas包裹下的canvas 没有touch事件绘制更没有响应touch

预期结果：

touch响应

实际结果：

无touch响应

bug描述：

uniapp 项目中签名功能，在H5中没有touch 事件响应

ionicwang 1楼•18 天前

浏览器开启移动端模式了吗，pc模式是没有touch事件的。

ionicwang 2楼•18 天前

我就是测试 H5下的签名功能，怎么开启移动模式啊？我也不能对每个用户说你签名时开启一下移动模式啊

nodeper 3楼•18 天前

而且应该有鼠标在画布canvas的移动轨迹吧

caililin 4楼•18 天前

回复 1***@qq.com: 只有触控设备才会有touch事件，可以看下mdn文档

gougou168 5楼•18 天前

在 uni-app 中使用 uni-canvas 组件时，如果在 H5 平台上无法响应 touch 事件，可能是由于以下原因导致的：

1. `uni-canvas` 的 `touch` 事件支持

uni-canvas 组件在不同平台上的事件支持可能有所不同。在 H5 平台上，uni-canvas 可能并没有直接支持 touch 事件，而是需要使用 click 或 mousedown 等事件来模拟 touch 事件。

2. 解决方案

你可以通过以下方式来解决这个问题：

方法一：使用 `click` 或 `mousedown` 事件

在 H5 平台上，uni-canvas 支持 click 和 mousedown 事件，你可以使用这些事件来模拟 touch 事件。

<uni-canvas @click="handleClick" @mousedown="handleMouseDown"></uni-canvas>

export default {
  methods: {
    handleClick(event) {
      console.log('Canvas clicked', event);
    },
    handleMouseDown(event) {
      console.log('Canvas mouse down', event);
    }
  }
}

方法二：使用 `@touchstart` 事件

虽然 uni-canvas 在 H5 上可能不支持 @touchstart 事件，但你可以尝试在 uni-canvas 外层包裹一个 view 组件，并在 view 上监听 touch 事件。

<view @touchstart="handleTouchStart">
  <uni-canvas></uni-canvas>
</view>

export default {
  methods: {
    handleTouchStart(event) {
      console.log('Touch start', event);
    }
  }
}

方法三：使用原生 `canvas` 元素

如果你需要更精细的 touch 事件处理，可以直接使用原生 canvas 元素，并通过 @touchstart、@touchmove 等事件来处理 touch 事件。

<canvas @touchstart="handleTouchStart" @touchmove="handleTouchMove"></canvas>

export default {
  methods: {
    handleTouchStart(event) {
      console.log('Touch start', event);
    },
    handleTouchMove(event) {
      console.log('Touch move', event);
    }
  }
}

3. 注意事项

在 H5 平台上，touch 事件的兼容性可能不如 click 或 mousedown 事件好，因此建议优先使用 click 或 mousedown 事件。
如果你需要跨平台兼容性，可以使用条件编译来处理不同平台的事件绑定。

export default {
  methods: {
    handleEvent(event) {
      // #ifdef H5
      console.log('H5 event', event);
      // #endif
      // #ifdef MP-WEIXIN
      console.log('WeChat Mini Program event', event);
      // #endif
    }
  }
}