jquery - 双击后退按钮会导致网站后退两页

Question

如果我有一个包含三个或更多页面的页面结构，其中 p1 链接到 p2，p2 链接到 p3，并且我双击 p3 上的后退按钮。这将导致页面返回到 p2，然后立即返回到 p1。

有什么办法可以防止这种行为吗？

JSFiddle example code

Answer 1

创建自定义数据点击属性并将点击计数保留在其中。当您返回页面时，重置计数器。

实例:

• http://jsfiddle.net/SfqSa/39/

JS

$('#p3').live('pageshow', function(event, ui) {
    $('#goBackOne').click(function() {
        // if 0 (zero) clicks go back 1
        if($('#goBackOne').attr('data-clicks') == 0) {
            $('#goBackOne').attr('data-clicks', 1);
            history.back(-1);
        }
    });
});

$('#p2').live('pageshow', function(event, ui) {
   // reset to 0 (zero)
   $('#goBackOne').attr('data-clicks', 0);
});

HTML

<div data-role="page" id="p1">
    <a href="#p2" type="button">Go to page 2</a>
</div>
<div data-role="page" id="p2">
    <a href="#p3" type="button">Go to page 3</a>
</div>
<div data-role="page" id="p3">
    <a href="#" type="button" id="goBackOne" data-clicks="0">Back</a>
</div>