uniapp的touchmove事件中如何获取当前触摸的element

在uniapp的touchmove事件中，怎么获取当前触摸的element元素？我试过event.target但好像不太对，有没有更准确的方法？

2 回复

在uniapp的touchmove事件中，可以通过event.target获取当前触摸的元素。例如：

touchmove(e) {
  console.log(e.target)
}

注意：在uniapp中获取的是编译后的元素，可能与原始DOM结构有所不同。


在 UniApp 中，touchmove 事件默认不直接提供当前触摸元素的信息，但可以通过以下方法获取：

  1. 使用事件对象的 target 属性
    在 touchmove 事件处理函数中，通过 event.target 可以获取最初触发事件的元素。但注意，在移动过程中，target 可能不会随触摸位置变化。

    handleTouchMove(event) {
  const currentElement = event.target; // 获取触发事件的元素
  console.log(currentElement);
}

  2. 结合 touchstart 记录初始元素
    由于 touchmove 的 target 可能不更新，建议在 touchstart 时记录触摸起始元素：

    data() {
  return {
    touchedElement: null
  };
},
methods: {
  handleTouchStart(event) {
    this.touchedElement = event.target; // 记录触摸起始元素
  },
  handleTouchMove(event) {
    console.log(this.touchedElement); // 使用记录的元素
  }
}

  3. 通过坐标动态判断元素
    如果需要根据触摸位置实时获取元素，可使用 uni.createSelectorQuery() 查询坐标范围内的元素（注意性能）：

    handleTouchMove(event) {
  const touch = event.touches[0];
  const query = uni.createSelectorQuery().in(this);
  query.selectAll('.touchable-element').boundingClientRect(data => {
    data.forEach(rect => {
      if (touch.clientX >= rect.left && touch.clientX <= rect.right &&
          touch.clientY >= rect.top && touch.clientY <= rect.bottom) {
        console.log(rect); // 匹配的元素信息
      }
    });
  }).exec();
}

注意事项：

  • 方法1和2适用于静态元素交互。
  • 方法3适用于动态场景，但频繁查询可能影响性能，建议结合节流使用。
  • 若需兼容复杂手势，推荐使用第三方库（如 hammer.js 的 UniApp 版本）。
回到顶部