[JavaScript知识库]h5移动端实现物理返回键关闭弹框而非返回上一级页面

• 需求：页面中的popup弹框，可以通过物理返回键进行关闭

• 方案：
  （1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化
  （2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框
  （3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除

• 实现

// vue3 setup模式
import { useEventListener } from '@vueuse/core'

//页面中点击打开弹框按钮时，执行此方法
const addBackListener = () => {
    /*向history中push一个空路由*/
    history.pushState(null, '', document.URL)
    /*添加一次性监听器*/
    useEventListener(
      window,
      'popstate',
      () => {
        /*关闭弹框*/
        setSelectVisible && setSelectVisible()
      },
      {
        once: true,
      },
    )
    /*打开弹框*/
    setSelectVisible && setSelectVisible()
  }

// 页面中点击取消/关闭弹框时，执行此方法
const removeBackListener = () => {
    /*消费一次性监听器*/
    history.go(-1)
  }

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读