监听微信内、浏览器返回事件

最近做了一个信息编辑页面，如果用户有改动过信息点击返回后需要拦截返回，并弹出框提示是否需要保存本次修改，两个按钮 保存和不保存，保存-调接口然后返回上一页面，不保存-直接返回上一页面。

谷歌浏览器和微信内均有效 其余浏览器未测试

根据需求触发监听事件

monitorBack() {
    window.history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.popstateFunction, false);
    // this.popstateFunction 为监听到返回时触发的函数
}

根据需求编写触发浏览器返回后的逻辑

需要一直拦截返回 就不要增加取消监听事件

需要拦截一次 就在取消监听事件后 增加页面返回

// 监听触发
popstateFunction() {
    // 拦截返回后的逻辑

    // 取消监听事件
    window.removeEventListener('popstate', this.popstateFunction, false);
}

 踩到的坑！！！

拦截返回后调接口 需要返回上一页面，直接将

window.removeEventListener('popstate', this.popstateFunction, false);

写在了接口调用完成内 在其下面增加返回上一级，导致返回失效（需要在点一次返回）或者需要多层级返回 。

解决方式 不需要在接口内添加删除监听事件，直接返回，触发监听事件，在触发的事件内取消监听事件如上 监听触发函数，在执行一次返回。