ミドルクリックJS機能

Question

私はスプライトシートアニメーションを使用しているので、背景イメージとして設定する必要がある私が作業しているサイト上のボタンがあります。アニメーションが再生されるまで数秒で他のページへのリダイレクトを遅らせるには、ボタンを定期的にクリックする必要がありますが、中マウスのクリックが遅れなく新しいタブで機能することを望みます。

現在、私はこれをJavascriptで動作させていますが、すべてのことがそのように扱われ、hrefを持たないことはかなり悪い考えです。

だから私はこの作った：アイデアは、通常のクリック機能をトリガし、中央のマウスクリックだけで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> 

を。

これはFirefoxで動作します。しかし、ChromeとSafariでは、中クリックが機能をトリガーし、その結果、同じウィンドウ内に犬のリンクが開きます（完成バージョンではリンクは同じです）。

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

EDIT：ところで

私は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);  
     } 
    }); 
}); 

すべてのブラウザで動作するようです。うまくいけば、これらは今後このページにつまずく人にとっては役に立つかもしれません。

Answer 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からreturn falseをを削除したが、イベントですが、新しいコードラインevent.preventDefault ? event.preventDefault():event.returnValue = false;,prevents default action左クリックしたとき。
• button code checkをJavascriptに追加しました。

作業デモコードはhereです。

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