Middle Click JS Function

Question

I have a button on the site I am working on that uses a sprite sheet animation and so needs to be set as a background image. I require a regular click on the button to delay the redirect to another page by a fraction of a second for the animation to play, however I still wish for middle mouse clicks to function to open in new tab, without a delay.

Currently I have this working in Javascript but it seems a pretty bad idea for everything to be handled that way and not to just have a href.

So I have made 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 being that a regular click triggers the function and incurs a delay whereas a middle mouse click will just go straight to the href link.

This works in Firefox. However in Chrome and Safari the middle click triggers the function and as a result opens the dog link in the same window (on the finished version the links will be the same of course).

Basically all I need is a href that delays on click but still functions normally on middle click. My working solution uses Javascript to open in new tab on middle click but it strikes me that this may override browser settings and is probably a bad idea.

EDIT:

In the meantime I had found this solution using Jquery:

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

...and the HTML:

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

This worked but encountered the same problem with Chrome treating a middle click as a left click and hence opening it in the same window.

I have now modified it to include the content from sransara so that... I think... everything is resolved. Again using 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);    
         }
    });
});

Seems to work in all browsers. Hopefully these can be of use to anyone stumbling upon this page in the future.

Side note: Don't pass strings to `setTimeout` (it uses `eval`), pass functions. `setTimeout(function(){ window.location = "http://www.dog.com"; }, 800);` — gen_Eric, Apr 25 '12 at 20:45

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

This is just a quick solution, but I think it mostly fits into your need.

The code of HTML anchor tag:

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

Here is the 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);

    }
}

There are few simple changes:

I have removed the return false from onclick event, but the new code line event.preventDefault ? event.preventDefault():event.returnValue = false;, prevents default action when left clicked.
And added a button code check to Javascript.

Working demo code is here.

This is a quick solution, some area for improvement is to: Take out the inline onclick event and add an event listener dynamically with JS.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 26 '12 at 00:36

sransara

3,454
2
19
21

Thanks. I have found another solution which I currently have implemented (will post below) which does the job nicely and avoids using an onclick... however this still has a problem in that Chrome middle click seems to function as left click when javascript is involved. I may well combine this solution with my own (I say my own, I found it online)... – Sasha Apr 26 '12 at 01:59
Thanks for the help. Added modified version of your code to original post, if you're interested. – Sasha Apr 26 '12 at 02:46

Middle Click JS Function

1 Answers1