0

私はいくつかのリンクで少し奇妙なことをするサイトのために開発しています。

ユーザーがリンクをクリックすると、このようなインジケーターGIFがリンクの横に表示され、リンク自体が無効になります。次に、ページに移動します。これは、リンクがすぐに読み込まれない場合、せっかちなユーザーがリンクを繰り返しクリックして、サーバーに余分な負荷がかかる可能性があるためです。

これを行う方法は次のとおりです。

<a id="link1" href="/target_page"
   onclick="var link = document.getElementById('link1');
            var loc = link.href;
            link.removeAttribute('href');
            link.setAttribute('onclick', 'return false;');
            document.getElementById('link1_img').style.display='';
            window.location = loc;">
  Link Text
  <img id="link1_img" src="/images/indicator.gif" style="display:none;" />
</a>

ここに問題があります。これは、ユーザーがリンクを通常どおりクリックするか、右クリックしてコンテキストメニューから新しいウィンドウまたはタブで開く場合に期待される動作を示しますが、ユーザーが中クリックまたはCtrl+を押すと常に正しく機能するとは限りません。リンクをクリックします。

その場合の望ましい動作は、JavaScriptをすべてスキップして、新しいタブでリンクを開くことです。私は各主要ブラウザの最新バージョンを使用してWindowsで簡単なテストを行いましたが、IE、Firefox、Operaはすべてこれを行います。ただし、ChromeとSafariはインジケーターを表示し、現在のタブでリンクを開きます。

すべてのブラウザで一貫して動作させる方法について何か提案はありますか？

4

1 に答える 1

0

ミドル クリックの処理にはこちらのコードを使用できます。また、Ctrl+クリックについてはこちらをご覧ください。ただし、クリックの代わりにミドルクリックに .mousedown を使用する必要があることがわかりました (少なくとも Firefox では)。

使用する場合

$('#link').click(function(e) {
    if(e.ctrlKey && e.which == 1 || e.which == 2) { // Ctrl + Click
        console.log("hi");
        $(this).css('color','#aaa');
        $(this).click(function(e) { e.preventDefault(); });
    } 
});

追加しないe.preventDefault()でください。期待どおりに機能するはずです。Firefox、Chrome、および IE9 で動作します。

編集：jQueryがなければ、これが私のやり方です。ただし、 vsに関するこの投稿をご覧ください。preventDefault()return false;

document.querySelector('#link').onclick = function(e) {
    this.style.color = '#aaa';
    disableLink(this);
}

// middle clicks only captured in mousedown
document.querySelector('#link').onmousedown = function(e) { 
    this.style.color = '#aaa';
    if (e.button == 1) {
        disableLink(this);
    }
}

function disableLink(elem) { 
    elem.onclick = function(e) { console.log("HI"); this.href = '#'; return false;}
    elem.onmousedown = function(e) { console.log("HI"); this.href = '#'; return false;}
}

残念ながら、Chrome と Firefox ではミドル クリックの処理方法に違いがあるようです。Firefox は で中クリックのみを表示しonmousedown、 で新しいタブを開きますonmousedown。これは、Firefox の場合、onmousedown の後にリンクを無効にする必要があることを意味します。ただし、Chrome では、中クリックはonmousedownとonclickに表示されますが、リンクは の後にしか開かれませんonclick。マウスダウンでリンクを無効にしているため、onclick実行する機会がありません:(。

これを修正する方法がわからない...

于 2012-07-15T18:33:22.280 に答える