uni-app中touchstart事件的参数UniTouchEvent缺少当前DOM信息
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
事件通常会绑定到一个组件或页面上,我们可以通过事件对象中的target
或currentTarget
属性来获取到触发事件的元素。虽然这些属性返回的是组件实例的引用,但你可以通过一些方法获取到组件的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已渲染完毕后再进行查询。