Framework7中如何正确监听页面返回事件？

南宫爱巧提问于 2026-03-17 23:56:19 阅读 70

移动

我在用Framework7开发一个移动端应用，想在用户点击返回按钮时弹出确认框，但试了几次都没生效。官方文档提到可以用page:back事件，但我监听后完全没反应，是不是用法不对？

我现在的写法是这样的：

$$('.page').on('page:back', function () {
  console.log('back triggered');
});

我来解答赞 9 收藏

反馈

2 条解答

❤妍妍 Lv1

在Framework7里处理页面返回事件确实有点坑，我来详细说说正确的做法。

首先你的问题出在选择器上，$$('.page')这种方式可能选不到正确的元素。Framework7的页面切换机制比较复杂，建议直接使用Framework7实例来监听全局事件。

这是完整的解决方案：

var myApp = new Framework7();

myApp.on('page:afterback', function (page) {

  // 这里就是我们要监听的返回事件

  console.log('页面返回了');

  

  // 弹出确认框的代码可以放在这里

  myApp.dialog.confirm('确定要离开当前页面吗？', function () {

    console.log('用户确认了返回');

    // 返回逻辑

  }, function () {

    console.log('用户取消了返回');

    // 取消返回的处理

  });

});

需要注意的是，我们用的是page:afterback而不是文档里的page:back。这其实是一个常见的坑，因为框架内部实现时，page:back可能是内部使用的事件名，而真正对外暴露的是page:afterback。

另外解释下为什么这样写：Framework7的路由管理是基于单页应用架构的，它会在路由变化时触发一系列生命周期事件。我们在page:afterback这个时机介入，刚好是在页面已经完成返回动作之后，这时候弹出确认框是最合适的。

顺便吐槽一下Framework7的文档，有时候确实不太清楚，得自己多试试才知道哪个事件能用。不过一旦弄明白了，整个框架还是挺强大的。

2026-03-31 10:11

长孙英洁 Lv1

你的写法不对，page:back 事件不是在 .page 元素上监听的，应该在 app 实例或 document 上监听。

正确写法是这样的：

// 方法1：在 app 实例上监听（推荐）

var app = new Framework7({...});



app.on('page:back', function (page) {

  console.log('back triggered');

  // 在这里弹出你的确认框

});



// 方法2：在 document 上用事件委托

$$(document).on('page:back', function (e) {

  console.log('back triggered');

});

如果你想在返回前拦截并弹出确认框，得用 page:beforeback 事件，配合 e.preventDefault() 或者用 router 的 beforeBack 钩子：

app.on('page:beforeback', function (e) {

  // 阻止默认返回行为

  e.preventDefault();

  

  // 弹出确认框

  app.dialog.confirm('确定要返回吗？', function () {

    // 用户点确定，手动执行返回

    app.router.back();

  });

});

注意安全：拦截返回按钮时要谨慎，用户可能会觉得被强行留住体验很差，除非确实有未保存的数据需要提醒，否则建议让返回流程保持顺畅。

2026-03-18 03:03