Framework7中如何关闭返回按钮的点击事件？附标准代码

Hey there, looks like you're working with Framework7's navbar component. To turn off the default back action triggered by that button, here are a few reliable methods:

Method 1: Prevent Default Event & Bubbling #

Grab the back button element and add a click handler that stops the default behavior and event propagation—this blocks Framework7's internal logic from firing:

const backButton = document.querySelector('.navbar .back.link');
backButton.addEventListener('click', function(e) {
  // Stop the default back navigation
  e.preventDefault();
  // Block the event from reaching Framework7's handlers
  e.stopPropagation();
  // Add your own custom logic here if needed!
});

Method 2: Override Framework7's Back Link Binding #

If Framework7 auto-bound the back action on initialization, you can use its API to override or disable it:

// Assuming your Framework7 instance is named `app`
app.navbar.setBackLink('.navbar .back.link', function() {
  // Returning false cancels the default back action
  return false;
});

Alternatively, just remove the back class from the anchor tag—Framework7 won't recognize it as a back button anymore:

<a href="#" class="link"> <i class="icon icon-back"></i><span>Back</span></a>

Method 3: Route Interception (Global Control) #

For a global solution that controls back navigation across your app, use Framework7's route interceptor:

app.on('routeBeforeEnter', function(to, from) {
  // Check if this navigation is triggered by the back button
  if (from && from.url === '/current-page/' && to.url === '/previous-page/') {
    // Cancel the route change
    return false;
  }
});

Method 1 is the most straightforward vanilla JS approach that works across any Framework7 version. Method 2 is more framework-native and recommended if you're leaning into Framework7's APIs. Method 3 is great for when you need to control back behavior site-wide.

内容的提问来源于stack exchange，提问作者Igor