僅使用瀏覽器按鈕進行Onhashchange

Question

我有這個問題（我使用的是jQuery，但我並不局限於此）：

我正在使用Anchor導航（#id）和Ajax請求的組合。 為了使頁面移動到位（使用錨導航）或獲取信息（使用Ajax），我使用onhashchange事件。

編輯：我有一個小錯字。 我忘了檢查mouseDown標志是否為true並且是否觸發了hashchange事件，所以我添加了if語句。

使用jQuery它看起來像這樣:(當然這個代碼包含在一個函數中並在DOM加載時初始化但是對於這個問題並不重要）

$(window).bind('hashchange', function(e) { }

為了確保只有支持onhashchange的瀏覽器讀取代碼，我將其封裝為：

if ('onhashchange' in window) {
  $(window).bind('hashchange', function(e) { }
}

我的網絡應用程序是這樣制作的，我只想在瀏覽器中點擊后退/前進按鈕時觸發onhashchange事件。 要做到這一點，我喜歡這樣：

if ('onhashchange' in window) {
  $(window).bind('mousedown hashchange', function(e) { }
}

現在，如果我在視口中單擊，我將觸發mousedown事件。 如果mousedown事件被觸發，我知道我沒有單擊瀏覽器后退/前進按鈕，我可以使用這樣的標志停止onhashchange事件：

var mouseDown = false;

if ('onhashchange' in window) {
  $(window).bind('mousedown hashchange', function(e) {
    if (e.type === 'mousedown') {
      mouseDown = true;
    }

    if (mouseDown && e.type === 'hashchange') {
      // if the mousedown event was triggered and when the haschange event triggers,
      // we need to stop the hashchange event and restore the mouseDown flag
      mouseDown = false;
      e.stopPropagation();          
    }

    if (!mouseDown && e.type === 'hashchange') {
      // Do the onhashchange stuff here
    }
  }
}

這會導致IE出現問題，因為它無法將鼠標事件綁定到窗口對象（？）。 IE永遠不會“看到”mousedown事件。

要解決這個IE問題，我可以使用“clientY”屬性。 此屬性在IE中的所有事件調用中傳遞，並告訴您鼠標的坐標。 如果e.clientY小於0，則鼠標位於視口之外，我將通過單擊瀏覽器后退/前進按鈕來了解我觸發了onhashchange。 它現在看起來像這樣：

var mouseDown = false;

if ('onhashchange' in window) {
  $(window).bind('mousedown hashchange', function(e) {
    // IE: Use e.clientY to check if the mouse position was within the viewport (i.e. not a nagative value for Y)
    // !IE: Use e.type
    if (e.type === 'mousedown' || e.clientY > 0 ) {
      mouseDown = true;
    }

    if (mouseDown && e.type === 'hashchange') {
      // if the mousedown event was triggered and when the haschange event triggers,
      // we need to stop the hashchange event and restore the mouseDown flag
      mouseDown = false;
      e.stopPropagation();          
    } 
    if (!mouseDown && e.type === 'hashchange') {
      // Do the onhashchange stuff here
    }
  }
}

這個解決方案就像一個魅力，直到我不得不添加支持鍵盤上的箭頭導航。 現在，鼠標在屏幕上的位置並不重要。 只要IE窗口處於“活動”狀態，就會在敲擊鍵盤時觸發鍵控輸入的keydown事件。 這意味着clientY檢查不再按預期工作。

問題：

據我所知，onhashchange必須綁定到window對象。 如果我希望能夠通過偵聽另一個事件來控制一個事件，則必須在同一個回調函數中處理所有事件。

我怎樣才能讓它發揮作用？

Answer 1

所以，簡單地說 -

“我如何區分來自與DOM交互的后退/前進按鈕與導航”。

您可能希望有一個標志，以便在從代碼更改URL的哈希部分時，設置此標志，忽略hashchange事件，然后取消設置標志。 在這種情況下，事件將被忽略（一種關於你正在嘗試做什么的反向解決方案）。 你顯然想把它包裝在一個函數中。

但是，通常，使用hashchange事件進行導航的應用程序通常會使用hashchange事件作為更改應用程序狀態的方法。 因此，只有一個入口點，您無需區分事件是由瀏覽器導航與dom交互生成的。 我可能會建議改變你的做法。

我還要指出，所有瀏覽器都支持歷史記錄（甚至使用iFrame hack的IE6和IE7）。 看一下jQuery歷史插件

Answer 2

實現此目的的參考庫： http ： //benalman.com/projects/jquery-bbq-plugin/

我用它，效果很好

考慮放“！” 在網址中的“＃”之后，以便谷歌可以發現ajax網頁http://code.google.com/web/ajaxcrawling/docs/getting-started.html