JS middle function

I have a button on the site I'm working on that uses an animation of a sprite sheet and therefore needs to be set as a background image. I need a regular click on the button to delay the redirection to another page for a split second to play the animation, however I still want the middle mouse clicks to function to open in a new tab without delay.

This currently works for me in Javascript, but it seems like a pretty bad idea for everything to be handled this way and not just have href.

So, I did this:

    <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>

The idea is that a regular click starts the function and takes a delay, while the middle mouse click just goes directly to the href link.

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

, . , , .

+3
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);

    }
}

:

  • return false onclick, event.preventDefault ? event.preventDefault():event.returnValue = false;, , .
  • a Javascript.

- .

, : onclick JS.

+1

All Articles