6

私はこの問題を抱えています（私はjQueryを使用していますが、それに制限されていません）：

アンカーナビゲーション（#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) { }
}

私のWebアプリは、ブラウザーの戻る/進むボタンを押したときにのみ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ウィンドウが「アクティブ」である限り、キーボード入力をリッスンするキーダウンイベントは、キーボードを押すとトリガーされます。これは、clientYチェックが意図したとおりに機能しなくなったことを意味します。

問題：

私の知る限り、onhashchangeはウィンドウオブジェクトにバインドする必要があります。別のイベントをリッスンして1つのイベントを制御できるようにする場合は、すべてのイベントを同じコールバック関数内で処理する必要があります。

どうすればこれを機能させることができますか？

4

2 に答える 2

3

だから、簡単に言えば-

「戻る/進むボタンを押すことと、DOMとの対話によるナビゲーションを区別するにはどうすればよいですか」。

URLのハッシュ部分をコードから変更するときに、このフラグを設定し、hashchangeイベントを無視してから、フラグの設定を解除するようなフラグが必要な場合があります。その場合、イベントは無視されます（あなたがやろうとしていることに関する一種の逆の解決策）。明らかにこれを関数でラップしたいと思うでしょう。

ただし、一般に、ナビゲーションにhashchangeイベントを使用するアプリケーションは、アプリケーションの状態を変更する手段としてhashchangeイベントを使用することがよくあります。したがって、エントリポイントは1つだけであり、イベントがブラウザナビゲーションによって生成されたのかdomインタラクションによって生成されたのかを区別する必要はありません。おそらくあなたのアプローチを変えることをお勧めします。

また、履歴はすべてのブラウザー（iFrameハックを使用するIE6およびIE7でも）でサポートできるという事実を指摘しておきます。jQuery履歴プラグインを見てください

于 2011-01-03T19:18:26.247 に答える
1

これを実現するためのリファレンスライブラリ：http： //benalman.com/projects/jquery-bbq-plugin/

私はそれを使用しました、そしてそれは素晴らしい働きをします

「！」を入れることを考えてください URLの「＃」の後に、Googleがajaxページを検出できるようにします http://code.google.com/web/ajaxcrawling/docs/getting-started.html

于 2011-01-03T21:14:02.993 に答える