7

たとえば、ユーザーのリダイレクト先を決定するクリック ハンドラを持つ JavaScript コードがあります。ユーザーがリンクをクリックしたときに計算されるリダイレクトのランダムリンクだとしましょう。

以下にいくつかのシナリオを示します。

  • ユーザーがリンクを左クリックした場合、ユーザーの意図はナビゲーションを同じタブに保持することであり、window.location.

  • ユーザーがこのリンクをミドル クリックすると、Web サイトがミドル クリックを乗っ取って無視したように見え、ユーザーは新しいタブではなく同じタブ内にリダイレクトされます。

  • また、誰かがコメントした (そしてコメントを削除した?) ように、別のシナリオでは、修飾キーがブラウザに新しいタブや新しいウィンドウを開くことを提案することもあります。

  • もう 1 つの提案は、コンテキスト メニューを介して新しいタブまたはウィンドウでリンクを開くことができることです。これはそれほど重要ではありませんが、確実に同じユーザビリティの問題です。

この問題は多くの Web サイトで見られますが、特に Google アナリティクスでは、中クリックするたびにこの現象が発生します。

一部の JavaScript コードに必要なものの良い例は次のとおりです。

一部のデータを処理し、ユーザーがクリックしたリンクに進む前に完了する必要がある XHR 要求を送信します。

これをどのように回避しますか？たとえば、ユーザーがリンクが新しいタブに表示されることを期待しているかどうかを検出する方法はありますか? もしそうなら、新しいタブをロードすることは可能ですか? 多分私はこれについて間違った方法で考えていますか？

4

3 に答える 3

2

event.buttonどのマウスボタンがクリックされたかを識別するために使用できます。中央のボタンは 1 を返します。

eventオブジェクトには、自明のプロパティ と も含まれていますevent.ctrlKey。それらの値は、対応するキーが押された場合とそうでない場合です。event.altKeyevent.shiftKeytruefalse

達成したい動作: http://jsfiddle.net/pratik136/nCdhv/9/

html:

<a id="smart" href="http://www.bbc.co.uk/">Click</a>​

js:

$(function() {
    $('#smart').on('click', function(event) {
        if (event && event.button && event.button === 1) {
            event.preventDefault();
            window.open($('#smart').attr('href'), '_blank');
            return false;
        } else {
            return true;
        }
    });
});​

src: https://developer.mozilla.org/En/DOM/Event.button
ブラウザのサポート: http://help.dottoro.com/ljaxplfi.php

于 2012-08-01T02:15:19.833 に答える
1

これは質問に正確に答えるものではありませんが、根底にある質問です。$.ajax私の仲間は、それにはasync: falseオプションがあることに気づきました。

$(function() {
    $('a').click(function(e) {
        $.ajax({url: '/', async: false}).done(function(d) { alert('hello ' + d) })
    })
})​

フィドル: http://jsfiddle.net/gakman/7qdXE/

これにより、ajax 応答が返されるまでクリック イベントがブロックhref=""され、リンク先のタブ/ウィンドウが続行されます。

彼はまた、「これは史上最悪のことだ」と言っていますが、これは絶対に真実です.

于 2012-08-01T07:36:52.083 に答える
0

ブラウザー間で一貫した動作を得るには、ユーザーがリンクをクリックする前に、リンクの href 属性を適切な値に設定します。次に、リンクを同じウィンドウで開くか、新しいウィンドウで開くか、タブで開くかをユーザーが決定します。

例えば

<a href="http://www.apple.com" onclick="this.href='http://www.google.com'">Apple</a>

IE 9 および Firefox では、左クリックで Google が開き、ctrl + 左クリックで Apple が新しいタブで開きます。右クリックして [リンクを新しいタブで開く] を選択すると同様です。これを修正する唯一の方法は、ユーザーがリンクをクリックする前に href を設定することです。

クリック イベントは、リンクの中央クリックまたは右クリックに対してディスパッチされない可能性があります。

リンクがクリックされ、ページに戻るために戻るボタンが使用された場合、リンクの href は元のままであるか、スクリプトによって変更されたままになっている可能性があります。

肝心なのは、リンクをリンクのように振る舞わせることです。他の動作が必要な場合は、ボタンまたは別の UI オブジェクトを使用してください。

于 2012-08-01T03:20:23.533 に答える