uni-app nvue页面下使用@touchmove等事件时，获取不到target下的id

uni-app nvue页面下使用@touchmove等事件时，获取不到target下的id

操作步骤：

  • 必现

预期结果：

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

实际结果：

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

bug描述：

在video标签上层放一个图片，使用@touchstart和[@touchmove](/user/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](/user/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] }"
}

更多关于uni-app nvue页面下使用@touchmove等事件时，获取不到target下的id的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面下使用@touchmove等事件时，获取不到target下的id的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，使用 @touchmove 等事件时，确实可能会遇到无法直接获取到 target 下的 id 的问题。这是因为 nvue 页面的渲染机制与 vue 页面不同，nvue 是基于原生渲染的，事件处理机制也有所不同。

解决方案

  1. 使用 event.target 的替代方法 在 nvue 中，event.target 可能不会像在 vue 中那样直接指向触发事件的元素。你可以尝试使用 event.currentTarget 来获取当前事件的元素。

    <template>
  <view id="myView" @touchmove="handleTouchMove">
    <!-- Content -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      const id = event.currentTarget.id;
      console.log('ID:', id); // 输出: myView
    }
  }
}
</script>

  2. 使用 dataset 获取自定义数据 如果你需要获取元素的某些数据，可以使用 data-* 属性，并通过 event.currentTarget.dataset 来访问。

    <template>
  <view :data-id="myId" @touchmove="handleTouchMove">
    <!-- Content -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      myId: '123'
    };
  },
  methods: {
    handleTouchMove(event) {
      const id = event.currentTarget.dataset.id;
      console.log('ID:', id); // 输出: 123
    }
  }
}
</script>

  3. 使用 ref 获取元素 如果你需要获取元素的引用，可以使用 ref 来获取。

    <template>
  <view ref="myView" @touchmove="handleTouchMove">
    <!-- Content -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      const id = this.$refs.myView.id;
      console.log('ID:', id); // 输出: myView
    }
  }
}
</script>
回到顶部