1***@qq.com
1***@qq.com
  • 发布:2024-05-28 17:09
  • 更新:2024-05-28 17:09
  • 阅读:158

【报Bug】nvue页面下使用@touchmove等事件,获取不到target下的id

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.17

手机系统: Android

手机系统版本号: Android 14

手机厂商: 华为

手机机型: nova 10z

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

必现

预期结果:

"target": {
"id": "zoom",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 5,
"offsetLeft": 6
},

实际结果:

"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},

bug描述:

在video标签上层放一个图片,使用@touchstart和@touchmove去移动,在图片上有个按钮的时候,获取不到target.id。在H5端是正常的。
代码如下

<video :style="{width: '100%',height: (height-150)+'px'}" :src="liveUrl" autoplay="true" :controls="false"  
            :enable-progress-gesture="false">  
            <cover-view class="image_data" :style="{'height':(imageHeight+20)+'px','width':(imageWidth+20)+'px',...position}" v-if="showImage">  
                <view class="canvas-border" v-if="selected" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" :style="{'height':(imageHeight+20)+'px','width':(imageWidth+20)+'px'}" @touchend.stop="onTouchEnd">  
                    <view class="image" :style="{'height':imageHeight+'px','width':imageWidth+'px',...imageCss}" >  
                        <image :src="params.imageUrl" mode="widthFix" style="width: 100%;height: 100%;"  
                        ></image>  
                    </view>  
                    <view class="canvas-zoom icon"  id="zoomicon" >  
                        <image src="../../static/icon/zoom.png" mode="widthFix" style="width: 30rpx;" id="zoom" ref="zoom"></image>  
                    </view>  
                </view>  
            </cover-view>  
        </video>
       const onTouchStart = (e) => {  
        const currentX = e.touches[0].screenX || e.touches[0].clientX  
        const currentY = e.touches[0].screenY || e.touches[0].clientY  
        startPosition.x = currentX  
        startPosition.y = currentY  
        touchTarget.value = e.target.id  
        selected.value = true  
    }  

    const lastMoveTime = ref('')  
    const onTouchMove = (e) => {  
        const currentX = e.touches[0].screenX || e.touches[0].clientX  
        const currentY = e.touches[0].screenY || e.touches[0].clientY  
        const currentTime = new Date().getTime()  
        const offsetX = currentX - startPosition.x  
        const offsetY = currentY - startPosition.y  
        if (touchTarget.value == 'zoom') {  
            if (currentTime - lastMoveTime.value < 200) return  
            //放大缩小  
            const distance = Math.sqrt(  
                Math.pow(offsetX, 2) + Math.pow(offsetY, 2)  
            )  
            let scale = position.scales  
            if (currentX > startPosition.x) {  
                scale += distance / 100  
            } else {  
                scale -= distance / 100  
            }  
            //以中心放大  
            position.scales = scale < 0.5 ? 0.5 : (scale > 2 ? 2 : scale)  
            console.log(position,"opp")  
            position.transform = `scale(${position.scales}) rotate(${position.rotate}deg)`  

        } else {  
            if (currentTime - lastMoveTime.value < 80) return  
            //移动  
            const maxLeft = width.value - imageWidth.value - 10  
            const maxTop = height.value - imageHeight.value - 150  
            let newLeft = parseInt(position.left) + offsetX  

            let newTop = parseInt(position.top) + offsetY  
            // 判断是否超出容器边界  
            if (newLeft < -10) {newLeft = -10}  
            if (newLeft > maxLeft) {newLeft = maxLeft}  
            if (newTop < -10) {newTop = -10}  
            if (newTop > maxTop) {newTop = maxTop}  
            position.top = newTop + 'px'  
            position.left = newLeft + 'px'  
        }  
        startPosition.x = currentX  
        startPosition.y = currentY  
        lastMoveTime.value = currentTime  
    }

在H5中按住id为zoom的image去移动的时候 ontouchstart的回调为:{
"type": "touchstart",
"timeStamp": 53667,
"target": {
"id": "zoom",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 5,
"offsetLeft": 6
},
"detail": {},
"currentTarget": {
"id": "",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 0,
"offsetLeft": 0
},
"touches": [
{
"identifier": 0,
"pageX": 260.86956787109375,
"pageY": 301.0869445800781,
"clientX": 260.86956787109375,
"clientY": 301.0869445800781,
"force": 1
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 260.86956787109375,
"pageY": 301.0869445800781,
"clientX": 260.86956787109375,
"clientY": 301.0869445800781,
"force": 1
}
],
"__instance": true
}

在app中 回调为{
"type": "touchstart",
"timeStamp": 1716887278253,
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"touches": [
{
"screenY": 373.6666564941406,
"screenX": 234,
"pageX": 46.66666793823242,
"pageY": 121,
"identifier": 0
}
],
"changedTouches": [
{
"screenY": 373.6666564941406,
"screenX": 234,
"pageX": 46.66666793823242,
"pageY": 121,
"identifier": 0
}
],
"stopPropagation": "function() { [native code] }",
"preventDefault": "function() { [native code] }"
}

2024-05-28 17:09 负责人:无 分享
已邀请:

要回复问题请先登录注册