1***@qq.com
1***@qq.com
  • 发布:2023-12-13 11:02
  • 更新:2023-12-13 14:49
  • 阅读:219

【报Bug】uni-canvas 早H5没有touch 事件响应

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 14.0 (23A344)

HBuilderX类型: 正式

HBuilderX版本号: 3.98

浏览器平台: Chrome

浏览器版本: 版本 119.0.6045.159(正式版本) (x86_64)

项目创建方式: HBuilderX

App下载地址或H5⽹址: http://222.92.38.178:8091/h5/#/bundle_b/pages/order_submit/order_submit?query=%7B%22data%22%3A%22%5Bobject%20Object%5D%22,%22org%22%3A%22%5Bobject%20Object%5D%22%7D

示例代码:

'''
<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>  

</u-popup>

method:{
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 事件响应

2023-12-13 11:02 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

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

  • 1***@qq.com (作者)

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

    2023-12-13 15:56

  • 1***@qq.com (作者)

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

    2023-12-13 15:59

  • YUANRJ

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

    2023-12-13 16:13

要回复问题请先登录注册