打包为uni-app app,canvas在绘制过程中,其他元素的点击事件,在android中是生效的,在ios中是不生效的

打包为uni-app app,canvas在绘制过程中,其他元素的点击事件,在android中是生效的,在ios中是不生效的

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win11
HBuilderX类型 正式
HBuilderX版本 4.57
手机系统 iOS
手机系统版本 iOS 18
手机厂商 苹果
手机机型 iPhone16
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

首页点击“接力画画”,进入页面点击“接画”tab,进入一个作品,刚进入会进行播放作品,点击屏幕中“画作”,正常情况会停止播放,可是在ios中不会响应事件

预期结果:

在播放作品时,ios也能响应“画作”按钮的事件,结束播放

实际结果:

在ios系统中,播放作品(canvas绘制过程)中,不响应事件,导致播放中不能停止播放

bug描述:

一个画板功能,使用的canvas标签,点击屏幕中的“播放”,开始绘画,在绘画过程中点击“画作”,则会停止绘画。androad系统没有问题,ios在绘画过程中点击事件不生效,只能等绘画停止才会生效,附录屏

录屏.zip

App下载地址或H5网址:

https://app.liuyingyong.cn/build/download/25c42ae0-0ddb-11f0-ac2d-3d38a370b0a4


更多关于打包为uni-app app,canvas在绘制过程中,其他元素的点击事件,在android中是生效的,在ios中是不生效的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello , 看你这个视频,并不能够看出实际问题,请您提供一下一个可以复现的问题的最小项目,这样有助于问题的排查

更多关于打包为uni-app app,canvas在绘制过程中,其他元素的点击事件,在android中是生效的,在ios中是不生效的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS平台上常见的Canvas事件穿透问题。iOS系统在处理Canvas绘制时,默认会阻止其他元素的点击事件响应。

解决方案建议:

  1. 使用CSS设置Canvas的pointer-events属性:
canvas {
  pointer-events: none;
}
  1. 或者在绘制过程中动态控制:
// 开始绘制时
this.canvasEl.style.pointerEvents = 'none';

// 绘制结束时
this.canvasEl.style.pointerEvents = 'auto';
回到顶部