uniapp的touchmove事件中如何获取当前触摸元素的id "如何获取uniapp touchmove事件目标元素的id？"

在uniapp开发中，使用touchmove事件时，如何获取当前触摸的目标元素id？我在事件对象event中尝试过event.target.id和event.currentTarget.id，但获取到的值都不正确。请问正确的获取方式是什么？需要兼容微信小程序和H5平台。

2 回复

在touchmove事件对象中，通过 e.target.id 获取当前触摸元素的id。


在uni-app的touchmove事件中，可以通过事件对象的currentTarget属性获取当前触摸元素的id。

具体方法：

<template>
  <view 
    @touchmove="handleTouchMove"
    id="myElement"
    class="touch-area"
  >
    触摸区域
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      // 获取当前触摸元素的id
      const elementId = event.currentTarget.id;
      console.log('当前触摸元素id:', elementId); // 输出: myElement
      
      // 或者使用dataset获取数据
      // const elementId = event.currentTarget.dataset.id;
    }
  }
}
</script>

关键点说明：

  1. event.currentTarget.id - 获取绑定事件的元素的id
  2. event.currentTarget - 指向事件绑定的元素（推荐使用）
  3. event.target - 指向实际触发事件的元素（可能不是绑定事件的元素）

注意事项：

  • 确保元素设置了id属性
  • 如果需要传递动态数据，可以使用data-*属性：
<view @touchmove="handleTouchMove" :data-id="dynamicId"></view>

handleTouchMove(event) {
  const id = event.currentTarget.dataset.id;
}

这样就能在touchmove事件中准确获取到当前触摸元素的标识信息了。

回到顶部