How can I control the back button event in jQuery Mobile?

Question

I tried to control back button, but I can’t. In here;

Take control of the hardware back button using jQuery Mobile

  event.keyCode == 27 // That’s for escape
  event.keyCode == 8 // That’s for backspace...it's also working on browser, but it doesn’t work on my tablet.

How can I do it?

[How to detect if the back button is pressed in mobile phone](https://stackoverflow.com/q/39087816/1066234) — Avatar, Mar 16 '22 at 05:21

score 56 · Accepted Answer · edited Aug 31 '21 at 16:21

56

Recommended method pagecontainerbeforechange: https://jqmtricks.wordpress.com/2014/12/01/detect-back-navigation/

You need to listen to the navigation event and state.direction.

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // Do something
  }
  if (direction == 'forward') {
    // Do something else
  }
});

jQuery Mobile API: Navigation event

Demo

edited Aug 31 '21 at 16:21

Peter Mortensen

30,030
21
100
124

answered Aug 13 '13 at 15:36

Omar

32,261
9
68
109

1

data.state.direction is undefined for me in Chrome (on desktop), but otherwise works great! Thanks – Jonathan Benn Mar 11 '15 at 13:54
2

@JonathanBenn try this then https://jqmtricks.wordpress.com/2014/12/01/detect-back-navigation/ – Omar Mar 29 '15 at 15:15
1

@Omar would you say it is better to use `pagecontainerbeforechange` over `navigate` since it has a wider scope? – Adjit Apr 14 '15 at 16:28
@Adjit Yes, much better. – Omar Mar 23 '16 at 16:20

score 3 · Answer 2 · edited Aug 31 '21 at 16:00

3

You can do this without jQuery Mobile

window.addEventListener("hashchange", function(e) {
    if(e.oldURL.length > e.newURL.length)
        alert("back")
});

<a href="#p2">goto page 2</a> and then use browser's navigation.</div>

And also Demo in CodePen.

edited Aug 31 '21 at 16:00

Peter Mortensen

30,030
21
100
124

answered May 21 '19 at 08:16

Mahdi Bashirpour

13,853
11
101
132

How can I control the back button event in jQuery Mobile?

2 Answers2

Linked

Related