环信
环信
  • 发布:2023-04-06 11:26
  • 更新:2023-04-11 12:46
  • 阅读:524

【报Bug】创建项目勾选Vue3版本发现longpress 长按返回的event 缺少touches字段

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

浏览器平台: Chrome

浏览器版本: 111.0.5563.146(正式版本) (arm64)

项目创建方式: HBuilderX

示例代码:

测试代码:

<template>  
	<view class="content">  
		<image class="logo" src="/static/logo.png"></image>  
		<view class="text-area" @longpress="longPress">  
			<text class="title">{{title}}</text>  
		</view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				title: 'Hello'  
			}  
		},  
		onLoad() {  
  
		},  
		methods: {  
			longPress(e){  
				console.log('testEvent',e)  
			}  
		}  
	}  
</script>

Vue3项目longpress event返回:

{  
    "type": "longpress",  
    "timeStamp": 167209.59999999776,  
    "target": {  
        "id": "",  
        "dataset": {  
            "v-1cf27b2a": "",  
            "v1cf27b2a": ""  
        },  
        "offsetTop": 240,  
        "offsetLeft": 178  
    },  
    "detail": {},  
    "currentTarget": {  
        "id": "",  
        "dataset": {  
            "v-1cf27b2a": "",  
            "v1cf27b2a": ""  
        },  
        "offsetTop": 240,  
        "offsetLeft": 178  
    },  
    "__instance": true  
}

Vue2项目 longpress event返回:

{  
    "@warning": "mp is deprecated",  
    "type": "longpress",  
    "timeStamp": 8296.699999999255,  
    "detail": {},  
    "target": {  
        "id": "",  
        "offsetLeft": 167,  
        "offsetTop": 225,  
        "dataset": {}  
    },  
    "currentTarget": {  
        "id": "",  
        "offsetLeft": 167,  
        "offsetTop": 225,  
        "dataset": {}  
    },  
    "touches": [  
        {  
            "identifier": 0,  
            "pageX": 186.73828125,  
            "pageY": 239.828125,  
            "clientX": 186.73828125,  
            "clientY": 239.828125,  
            "force": 1  
        }  
    ],  
    "changedTouches": [  
        {  
            "identifier": 0,  
            "pageX": 186.73828125,  
            "pageY": 239.828125,  
            "clientX": 186.73828125,  
            "clientY": 239.828125,  
            "force": 1  
        }  
    ]  
}

操作步骤:

1)打开HBuilderx 选择创建项目勾选vue3版本。
2)在空白项目中绑定一个longpress事件,并输出所绑定方法的形参。
3)运行至浏览器打开控制台,并选择移动端模式,长按事件观察返回。
vue2同上

预期结果:

预期vue3中返回字段与vue2longpress一致,包含touches字段以及下属内容。

实际结果:

实际结果vue3 longpress事件不包含touches字段

bug描述:

what:经测试创建的Vue3项目模版运行在浏览器端,对比原有Vue2模版longpress长按事件缺少touches
字段返回,从而导致无法拿到 clientX、clientY、pageX、pageY,等字段。
why:主要使用依赖此event 返回根据长按位置,弹出手指接触位置的modal框。
是否稳定复现?可稳定复现。

测试创建项目见附件

2023-04-06 11:26 负责人:DCloud_UNI_LXH 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 3.7.13.20230411-alpha 已修复。

DCloud_UNI_LXH

DCloud_UNI_LXH

临时解决方案

将附件替换至 HX根目录/\plugins\uniapp-cli-vite\node_modules@dcloudio\uni-h5\dist 重新运行项目

环信

环信 (作者) - 环信官方账号

同样代码运行到小程序,经测试微信小程序可返回预期字段,H5浏览器无法返回预期字段。

YUANRJ

YUANRJ

感谢反馈,后续会修复。已加分

  • 环信 (作者)

    你好 请问有具体的修复时间吗?或者预期在哪个版本fix,最近要将老的项目迁移到vue3,所以需要一个大概时间。


    2023-04-06 17:41

  • 星拾夜暝

    回复 环信: 具体请参考:https://blog.csdn.net/weixin_38612163/article/details/129995729

    请稍后刷新页面即可,文章审核中


    2023-04-06 18:04

  • 环信 (作者)

    回复 星拾夜暝: 棒棒


    2023-04-07 13:32

要回复问题请先登录注册