打包为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在绘画过程中点击事件不生效,只能等绘画停止才会生效,附录屏
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
hello , 看你这个视频,并不能够看出实际问题,请您提供一下一个可以复现的问题的最小项目,这样有助于问题的排查
更多关于打包为uni-app app,canvas在绘制过程中,其他元素的点击事件,在android中是生效的,在ios中是不生效的的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个iOS平台上常见的Canvas事件穿透问题。iOS系统在处理Canvas绘制时,默认会阻止其他元素的点击事件响应。
解决方案建议:
- 使用CSS设置Canvas的pointer-events属性:
canvas {
pointer-events: none;
}
- 或者在绘制过程中动态控制:
// 开始绘制时
this.canvasEl.style.pointerEvents = 'none';
// 绘制结束时
this.canvasEl.style.pointerEvents = 'auto';