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 history plugin

Answer 2

实现此目的的参考库： http://benalman.com/projects/jquery-bbq-plugin/

我用它并且效果很好

考虑放“！”在网址中输入“＃”后，谷歌就可以发现ajax页面了 http://code.google.com/web/ajaxcrawling/docs/getting-started.html

仅使用浏览器按钮进行Onhashchange

2 个答案: