Javascript 哈默JS与历史

我构建了以下演示应用程序，允许用户使用触摸手势在各部分中左右移动，以及在页面中上下移动：

它使用Hammer JS进行手势，并使用hashchange插件跟踪用户的历史记录，以便用户可以轻松返回到同一位置，并使用浏览器按钮在历史记录中来回导航

当从一个页面导航到一个没有相应页面的节时，会出现问题，因为我总是希望在从一个节移动到另一个节时，将其默认为零（即使它们是该节中的匹配页面）

因此，如果您从：开始，然后尝试访问其他部分中的一个，向左或向右滑动，您将看到该部分返回到第0页但是这会导致双重调用hashchange，这意味着您不能使用浏览器的“后退”按钮返回，而是停留在该部分和页面上

有没有办法阻止这种事情发生

hashchange侦听器如下所示：

$(window).hashchange( function(){

    var nums = location.href.match(/(section|page)-\d+/g).map(
        function(x){ return +x.replace(/\D/g,"") }
    );

    currentSection = nums[0];

    currentPage = nums[1];

    if( $('.section[data-section=section-'+currentSection+']').find('.page[data-page=page-'+currentPage+']').length < 1) {

        currentPage = 0;
    }

    loadPage(currentSection, currentPage);

    hCarousel.showPane(currentSection, true);

    vCarousel.showPane(currentPage, true);

});

$（窗口）.hashchange（函数（）{
var nums=location.href.match（/（第|页）-\d+/g.map(
函数（x）{return+x.replace（/\D/g，“”）}
);
currentSection=nums[0]；
currentPage=nums[1]；
如果（$（'.section[data section=section-'+currentSection+']'））.find（'.page[data page=page-'+currentPage+']'）。长度<1）{
currentPage=0；
}
加载页（currentSection，currentPage）；
hCarousel.showPane（currentSection，true）；
vCarousel.showPane（当前页面，true）；
});

在hashchange上，通过将当前页面和节传递给每个实例中的showPane方法，确保两个旋转木马都知道发生了什么变化

if语句用于检查该页在节中是否有效（存在），如果无效，则默认为0

---

在carousel方法中，我也调用hashchange，因此当用户滑动时，它会更新历史记录，并且应该通过检查当前哈希是否与新哈希匹配来阻止该调用自己，这样它就不会重复它，并在历史记录中创建两个条目。

正如我在本期早些时候的评论中解释的那样源于用于确定要显示的下一页和上一页的索引

目前的情况

this.next = function() { return this.showPane(current_pane+1, true); };
this.prev = function() { return this.showPane(current_pane-1, true); };

这只是增加/减少索引并重新加载页面。因此，当用户在第

section-1/page-2

页并左/右导航时，他们被发送到

section-0/page-2

或

section-2/page-2

。加载页面后，

HashChange

处理程序确定页面不存在，并将页面索引重置为零，加载

section-0/page-0

或

section-2/page-0

。因此（正如您已经确定的），有一个额外的历史记录条目

您描述的问题是由于此冗余历史记录条目而发生的。当用户使用浏览器的后退按钮时，它会将它们返回到不存在的

section-0/page-2

或

section-2/page-2

，而

HashChange

函数会将它们重定向到

page-0

。有效防止用户向后导航

我建议您更新

hCarousel

的

prev

/

next

功能，以检查指定页面是否存在，如果不存在，则重置计数器。这是HashChange中代码的复制，但是它会更早地触发，从而防止错误的加载

this.next = function() {
 if( $('.section[data-section=section-'+(currentSection+1)+']').find('.page[data-page=page-'+currentPage+']').length < 1) {
   currentPage = 0;
 }
 return this.showPane(current_pane+1, true);
};

this.prev = function() {
 if( $('.section[data-section=section-'+(currentSection-1)+']').find('.page[data-page=page-'+currentPage+']').length < 1) {
   currentPage = 0;
 }
 return this.showPane(current_pane-1, true);
};

this.next=function（）{
if（$（'.section[data section=section-'+（currentSection+1）+']'）.find（'.page[data page=page-'+currentPage+']）。长度<1）{
currentPage=0；
}
返回此.showPane（当前窗格+1，true）；
};
this.prev=函数（）{
如果（$（'.section[data section=section-'+（currentSection-1）+']'）.find（'.page[data page=page-'+currentPage+']）。长度<1）{
currentPage=0；
}
返回此.showPane（当前窗格-1，true）；
};

因此，页面将从

section-1/page-2

跳转到

section-0/page-0

或

section-2/page-0

，而无需中间步骤

JsFiddle at-

---

（忽略古怪的用户界面-它是您代码的一个坏拷贝）

您的问题似乎是

下一个

，

上一个

函数。它们返回指数+/-1。因此，当用户向右滑动时，将使用节索引+1，这相当于一个不存在的页面，并导致页面以pageindex=0重新加载。当用户单击“返回”时，它们将被发送到不存在的页面，然后该页面将循环返回。我建议您更新next/prev逻辑，以确保它不会引用这些不存在的页面。例如，第1节第2页第2节第0页等的正确链接。你能举个例子吗？或者是拼凑一把小提琴？