如何在jQuery Mobile中控制返回按钮事件？

Question

我试图控制后退按钮，但是无法做到。在这里；

使用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.

我该如何做呢？

- Serkan

---

如何检测移动设备上的返回按钮是否被按下 - Avatar

Answer 1

推荐方法pagecontainerbeforechange: https://jqmtricks.wordpress.com/2014/12/01/detect-back-navigation/

---

你需要监听navigation事件和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: 导航事件

演示

- Omar

---

在桌面版Chrome上，data.state.direction对我来说是未定义的，但其他情况下都很好用！谢谢。 - Jonathan Benn

@JonathanBenn 那你可以试试这个 https://jqmtricks.wordpress.com/2014/12/01/detect-back-navigation/ - Omar

@Omar，你认为使用pagecontainerbeforechange比navigate更好，因为它的范围更广吗？ - Adjit

@Adjit 是的，好多了。 - Omar

Answer 2

你可以在不使用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>

还有CodePen演示。

- Mahdi Bashirpour