uniapp如何实现document事件监听

在uniapp中如何监听document上的事件？比如scroll或click事件，因为uniapp没有直接的document对象，尝试使用window或document.addEventListener都无效。请问正确的实现方式是什么？是否需要通过条件编译区分各端处理？

2 回复

uniapp中无法直接使用document事件监听，建议使用uni.onWindowResize等uni API替代，或通过条件编译在H5端使用document。


在uni-app中，由于运行在小程序或App等非浏览器环境，无法直接使用document.addEventListener。以下是替代方案：

1. 页面生命周期监听

使用uni-app页面生命周期函数处理常见事件：

export default {
  onLoad() {
    // 页面加载
  },
  onShow() {
    // 页面显示
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面卸载
  }
}

2. 全局事件监听（跨页面通信）

使用uni.$on、uni.$emit：

// 发送事件
uni.$emit('eventName', data)

// 监听事件
uni.$on('eventName', (data) => {
  console.log('接收数据:', data)
})

// 移除监听
uni.$off('eventName')

3. 触摸/点击事件监听

在模板中使用事件绑定：

<template>
  <view @click="handleClick" @touchstart="handleTouchStart">
    点击区域
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件')
    },
    handleTouchStart(e) {
      console.log('触摸开始', e)
    }
  }
}
</script>

4. 系统事件监听

使用uni-app提供的API：

// 网络状态变化
uni.onNetworkStatusChange((res) => {
  console.log('网络状态:', res.isConnected)
})

// 设备方向变化（仅App）
uni.onAccelerometerChange((res) => {
  console.log('加速度:', res)
})

注意事项：

  • 小程序环境不支持DOM操作
  • 全局事件需手动管理，避免内存泄漏
  • 页面事件在页面销毁时会自动清理
  • 使用前请查阅uni-app官方文档确认API兼容性

根据具体需求选择合适的监听方式，通常推荐优先使用页面生命周期和模板事件绑定。

回到顶部