3

私が取り組んでいるサイトには、スプライト シート アニメーションを使用するボタンがあり、背景画像として設定する必要があります。ボタンを定期的にクリックして、アニメーションを再生するために別のページへのリダイレクトを数分の一秒遅らせる必要がありますが、マウスの中ボタンをクリックして、新しいタブで遅延なく開くことができるようにしたいと考えています。

現在、私はこれをJavascriptで動作させていますが、hrefだけでなく、すべてをそのように処理するのはかなり悪い考えです。

だから私はこれを作った：

    <script type="text/javascript">

    function delayed(){
    window.stop();
    setTimeout('window.location = "http://www.dog.com";', 800);}

    </script>

<a href="http://www.google.com" onclick="delayed();return false">I am a link</a>

通常のクリックでは関数がトリガーされて遅延が発生するのに対し、マウスの中央クリックでは href リンクに直接移動するという考えです。

これは Firefox で動作します。ただし、Chrome と Safari では、中央のクリックで機能がトリガーされ、その結果、同じウィンドウで犬のリンクが開きます (完成したバージョンでは、もちろんリンクは同じになります)。

基本的に必要なのは、クリックを遅らせるが中クリックでは正常に機能する href だけです。私の実用的なソリューションでは、Javascript を使用して中クリックで新しいタブで開きますが、これはブラウザーの設定を上書きする可能性があり、おそらく悪い考えです。

編集：

その間、Jqueryを使用してこのソリューションを見つけました：

$(document).ready(function() {
      $(".delayed").click(function() {
        var href = $(this).attr('href');
        setTimeout(function() {window.location = href}, 800);
        return false;
    });
});

...そしてHTML: 

<a href="http://www.google.com/" class='delayed'></a>

これは機能しましたが、Chrome で中クリックを左クリックとして扱い、同じウィンドウで開くと同じ問題が発生しました。

sransara からのコンテンツを含めるように修正したので、... 思うに... すべてが解決されました。再び Jquery を使用します。

$(document).ready(function() {
      $(".delayed").click(function(event) {
          var href = $(this).attr('href');
          if(event.button == 0){
        event.preventDefault ? event.preventDefault():event.returnValue = false;
        setTimeout(function() {window.location = href}, 800);    
         }
    });
});

すべてのブラウザで動作するようです。今後このページにたどり着く方の参考になれば幸いです。

4

1 に答える 1

1

これは簡単な解決策ですが、ほとんどの場合、あなたのニーズに合っていると思います。

HTML anchorタグのコード:

<a href="http://www.google.com" onclick="delayed(event);">I am a link</a>

Javascript は次のとおりです。

function delayed(event){
    window.stop();
    if(event.button == 0){
        event.preventDefault ? event.preventDefault():event.returnValue = false;
        setTimeout(function(){ window.location = "http://www.yahoo.com"; }, 800);

    }
}

簡単な変更がいくつかあります。

動作するデモ コードはこちらです。

これは簡単な解決策です。改善が必要な領域は次のとおりです。インラインonclickイベントを取り出し、JS を使用してイベント リスナーを動的に追加します。

于 2012-04-26T00:36:58.630 に答える