曾小晨
曾小晨
  • 发布:2023-03-11 18:07
  • 更新:2023-03-11 20:49
  • 阅读:447

【报Bug】vue3 nvue touchstart stopPropagation 失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: 小米13

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<div class="relative cover-area" id="cover-area" :style="{ width: form.width, height: form.height }"  
     @touchmove="onTouchMove"  
     @touchstart="onTouchStart" @touchend="onTouchEnd">  
  <image :src="form.cover" :style="{ width: form.width, height: form.height }" />  
  <div :style="{ top: addTagBtnRect.handleTop, left: addTagBtnRect.handleLeft }"  
        class="flex-row flex-center add-tag bg-color-f6f6f6" @click="onTagClick" @touchstart.stop="onddd($event)" @touchmove.stop @touchend.stop>  
    <g-icon type="plus" size="30" bold color="#333" />  
  </div>  
</div>  
view>

操作步骤:

同代码示例

预期结果:

图片的touchstart等触摸事件不再执行。

实际结果:

还是执行

bug描述:

心累,一个坑踩完又来另外一个坑,写个页面写一天。
我只是简单的想给图片做一个点击添加 标记 的需求,用户点哪里,就在哪个位置添加一个标记,结果哎嘿,发现click拿不到点击的坐标。
行,我搜问答社区,搜百度,尝试将click换成tap,尝试将view换成divdiv的 Event 信息要比view丰富,但是也没有我要的坐标信息。
我接着尝试了一下touchstart,可以,里面有我想要的坐标,于是我通过touchstarttouchmovetouchend三个事件来模拟了click,嘿嘿,就很开心,终于好了。
想多了,还有问题,我不想让用户点击标记还执行图片上的touchstart(标记是在图片元素内部的,所以会有事件冒泡),我以为简单的加个.stop就完了,几秒钟就行,结果啊结果,发现不生效,于是又各种搜,还是不行,我绝望了。
而且社区有关于这个冒泡问题的反馈,没看到几个官方人员的回答,请问你们能不能把这些基本的问题修复一下,再去搞一些什么新特性?

2023-03-11 18:07 负责人:无 分享
已邀请:
曾小晨

曾小晨 (作者)

折腾了一下,通过clicktouchstart两者来实现了我所需要的功能,touchstart只作为收集坐标

要回复问题请先登录注册