uni-app中touchstart事件的参数UniTouchEvent缺少当前DOM信息

发布于 1周前 作者 caililin 来自 Uni-App

uni-app中touchstart事件的参数UniTouchEvent缺少当前DOM信息

在遍历渲染的情况下,无法获取特定的 ref class 和ID的情况下,使用touchstart去操作节点,是无法获取节点的DOM,只能通过点击区域的坐标和页面上所有的view遍历匹配在哪个view里面去获取DOM

这样很不科学

1 回复

在uni-app中处理touchstart事件时,确实可能会遇到UniTouchEvent对象缺少当前DOM信息的问题。这是因为UniTouchEvent主要包含了触摸事件的相关信息,如触摸点的位置、时间戳等,而不直接包含DOM节点的具体信息。不过,我们可以通过事件对象中的一些属性间接获取到触发事件的DOM元素。

在uni-app中,touchstart事件通常会绑定到一个组件或页面上,我们可以通过事件对象中的targetcurrentTarget属性来获取到触发事件的元素。虽然这些属性返回的是组件实例的引用,但你可以通过一些方法获取到组件的DOM信息(如果需要在小程序或App端获取具体的DOM节点信息,可能需要使用特定的API)。

以下是一个简单的示例,展示如何在uni-app中处理touchstart事件并尝试获取触发事件的元素信息:

<template>
  <view class="container" @touchstart="handleTouchStart">
    <text class="text">Touch me!</text>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      // event.target 是触发事件的元素
      const target = event.target;
      
      // 在uni-app中,target是一个组件实例,可以通过其属性获取一些信息
      console.log('Target:', target);
      
      // 如果需要获取具体的DOM节点信息(如在小程序或App端),
      // 可以使用uni.createSelectorQuery等方法,但注意这通常用于页面渲染后的查询
      // 下面是一个示例,但请注意这个方法不能在touchstart事件处理函数中直接使用,
      // 因为此时DOM可能还未完全渲染,需要延迟执行或使用其他方式确保DOM已渲染
      uni.createSelectorQuery().select('#myText').boundingClientRect(rect => {
        rect.id      // 节点的ID
        rect.dataset // 节点的dataset
        rect.width   // 节点的宽度
        rect.height  // 节点的高度
        rect.top     // 节点的上边界坐标
        rect.left    // 节点的左边界坐标
        rect.bottom  // 节点的下边界坐标
        rect.right   // 节点的右边界坐标
      }).exec();
      
      // 注意:上面的createSelectorQuery示例是为了说明如何获取DOM信息,
      // 实际上在touchstart事件中,你可能需要另一种策略来确保DOM已渲染完毕。
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-size: 20px;
}
</style>

请注意,上述uni.createSelectorQuery的使用方式仅作为示例,并不建议在touchstart事件处理函数中直接使用,因为此时DOM可能还未完全渲染。在实际应用中,你可能需要采用其他策略来确保DOM已渲染完毕后再进行查询。

回到顶部