uniapp如何监听页面点击位置

在uniapp开发中，如何监听用户点击页面的具体位置？比如获取点击事件的X、Y坐标，并实现根据不同区域触发不同操作？需要兼容H5和小程序平台，求具体实现方法或代码示例。

2 回复

在uniapp中监听页面点击位置，可以使用@tap事件。例如：

<view @tap="handleTap">点击我</view>

methods: {
  handleTap(e) {
    console.log('点击位置:', e.detail.x, e.detail.y)
  }
}

注意：不同组件支持的触摸事件可能不同，具体查看官方文档。


在Uniapp中监听页面点击位置，可以通过以下方法实现：

方法一：使用 @tap 事件（推荐）

<template>
  <view @tap="handleTap" class="container">
    <text>点击页面任意位置</text>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap(e) {
      // 获取点击位置坐标
      const { pageX, pageY } = e.changedTouches[0]
      console.log('点击位置：', pageX, pageY)
      
      // 或者使用 clientX, clientY
      const { clientX, clientY } = e.changedTouches[0]
      console.log('客户端坐标：', clientX, clientY)
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

方法二：使用 @click 事件

<template>
  <view @click="handleClick" class="full-screen">
    <text>点击页面</text>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick(e) {
      const touch = e.changedTouches[0]
      console.log('X坐标:', touch.pageX)
      console.log('Y坐标:', touch.pageY)
    }
  }
}
</script>

注意事项：

  1. 事件对象属性：

    • pageX, pageY：相对于文档的坐标
    • clientX, clientY：相对于视口的坐标

  2. 触摸事件：在移动端使用 changedTouches[0] 获取第一个触摸点

  3. 兼容性：@tap 在移动端响应更快，@click 在 H5 端更通用

  4. 页面全屏：确保监听元素覆盖整个页面（设置 width: 100%; height: 100vh;）

选择适合你需求的方法即可实现页面点击位置监听。

回到顶部