如何分辨向前或向後按鈕是否按下使用popstate事件

Question

我一直在做一些研究和看來該popstate事件觸發了歷史任何時間改變，但似乎沒有成爲一個以確定用戶是否單擊瀏覽器中的後退按鈕或前進按鈕。

我的使用情況是，在歷史可以追溯到的歷史或前進時，我有在Ajax應用程序遷移過來的路由時發生的定向動畫。我需要確定用戶是向後還是向前，這樣動畫纔有意義。令人遺憾的是，波普州事件不支持事件的方向。

我還會提到，我的應用程序是一個AngularJS應用程序的情況下，有一個角具體的答案，但一個更通用的JavaScript的解決方案將是最佳的。

Answer 1

我不確定哪個理解是正確的，但我對HTML5 pushstate的理解是不同的。

推國家的支持只是讓你捕捉，否則將作爲服務器（你或別人的）的請求被髮送在瀏覽器的URL變化。目的不是爲了給你「前進」和「後退」事件，而更像是一般的「位置變化」事件。然後，你的應用程序的工作就是檢查URL並找出用戶想要去的地方。

想想這樣說：如果用戶點擊了您的應用程序，你想用JavaScript來處理一個鏈接？你會有一些事件處理程序設置，它會捕獲點擊和操縱你的應用程序在某種程度上。因此，點擊「後退」或「前進」就像點擊一個鏈接，但您所獲得的只是用戶試圖查看的網址 - 沒有鏈接來綁定活動。

那麼你怎麼知道用戶想要做什麼？你可以使用全局變量或任何你能想到的方式管理狀態。如果您想減少代碼重複，則可以使用URL處理您的應用程序路由的全部。因此，您的點擊處理程序不會綁定到特定的鏈接（或一組鏈接），而是可以捕獲瀏覽器URL中的更改，然後確定如何處理新的URL。

BackboneJS執行此使用，其中特定路徑被綁定到特定路由器的功能的路由器對象，它設置應用一種特殊的方式的狀態，例如：

MyAppRouter = Backbone.Router.extend({ 
    routes: { 
     'home': 'setupHomeScreen', 
     'recipes': 'setupRecipesList', 
     'recipes/:id': 'setupRecipeScreen' 
    }, 

    setupHomeScreen: function() { 
     // ... 
    }, 

    setupRecipesList: function() { 
     // ... 
    }, 

    setupRecipeScreen: function(id) { 
     // ... 
    }, 

    // ... 

}); 

請原諒上的角骨幹代碼題。我仍然在學習Angular Way，並且來自一個Backbone背景，這個背景形成了我對pushstate的理解。

要回答你的問題

如果你的觀點形成某種層次或命令的，你可以存儲在一個全局變量。也許您決定爲每個視圖提供ID，然後每次瀏覽器狀態發生變化時，都會將這些ID推送到數組中。

var viewHistory = []; 

// ... they visited the recipe list. push it into the history 
viewHistory.push('recipeList'); 

// ... they visited a particular recipe. push it into the history 
viewHistory.push('recipe:13'); 

// ... they clicked the "back" button. we know from the URL that they want 
// the recipeList, but we don't know if they're trying to go forward or back. 
var nextView = 'recipeList'; 
if (viewHistory.indexOf(nextView) > 0) { 
    // *** Back Button Clicked *** 
    // this logic assumes that there is never a recipeList nested 
    // under another recipeList in the view hierarchy 
    animateBack(nextView); 

    // don't forget to remove 'recipeList' from the history 
    viewHistory.splice(viewHistory.indexOf(nextView), viewHistory.length); 
} else { 
    // *** They arrived some other way *** 
    animateForward(nextView); 
}