How can I make a javascript link openable via middle-click?

Question

My webpage works with a lot of data which is uploaded by the user, processed by the server and then returned back. Sometimes, the user will want to filter part of the data so the server would process only a subset of that data. So my webpage has a nice 'filter' button which filters according to the client's state.

Long story short: my clients want to be able to middle-click that button so it opens in a new tab. (Some actually use right-click -> 'open in new tab', so this has to be supported as well)

I'm a big believer in letting the user deciding how to open their links, so I wouldn't want this filter button to open a new window automatically. But I can't turn it into an [a href] link, because I need to run the JS filter first.

So the question becomes, how can I make a link which runs some code before opening?

EDIT: The solutions below which use the mouse click event would fail for users who use right click + open in new tab, which is (it turns out) fairly common among my users. I've updated the question accordingly.

Answer 1

You can use a simple onclick and then in the JavaScript make use of event.button to see which mouse button was clicked. This returns an integer value that represents the mouse button. 0 is the standard (normally left) click, 1 for the middle mouse button (what you want) and 2 for the right button. This also allows for reconfiguration of the pointing device, so it will use whatever key has been set to act as the middle mouse button rather than being triggered when the physical middle button mouse is used.

You can read more on the event.button on https://developer.mozilla.org/En/DOM/Event.button

EDIT:

It is probably worth using the event.preventDefault() method as well, so that it won't open a link in a new tab (for example). However you will have to manually open the link if you use this.

Answer 2

Use a button, capture click event in which you can put your filter logic then open new tab. You can always use css to make it look like either button or link style.

You can see this in how to use mouse middle click.

Answer 3

You can try this:

$("button").on('mousedown', function(e) {
 if(e.which == 1) {
   //Left button clicked
 }else if(e.which == 2) {
   //Middle button clicked
 } else if(e.which == 3) {
   //Right button clicked
 }
});

Answer 4

You can use the following idea using javascript.

HTML:

<a href="javascript:void(0);" onclick="clickMe();">Click Me</a>

Javascript:

function clickMe() {

   //Do here whatsever you want
   var test = "test";
   alert(test);

   var link = "mylink/whatsever-query-string";

   /// Use this if you want open link in self window
   // window.location.href = "mylink/whatsever-query-string"; 

   /// Use this if you want open link in new window
   window.open(link, "", 'width=500, height=600, toolbar=no,location=no, resizable=yes,scrollbars=yes, directories=no,status=no, titlebar=no');

   /// Use this if you want open link in new tab
   //  window.open(link, '_blank'); 
 }

DEMO Fiddle

EDIT: For mouse middle click you can use something like below,

HTML:

<div onmousedown="WhichButton(event)">ClickMouse</div>

JAVASCRIPT:

 function WhichButton(event) {
   var x = event.buttons;
   if (x == 4) {
     var test = "test";
     alert(test);
     window.open('', '_blank');
   }
 }

DEMO

Answer 5

For anyone passing through here, I did find the solution: I kept all the filtered data I needed in the browser's local storage. When the user opened the link, it redirected him to a page which knew to look at the local storage and run logic on the stored data, and then redirect him again to the right place.

This is not ideal: if the user tries to share the link by copying it directly from the a href it wouldn't work on another user's computer (although I can display a warning in such a case). However, if the user clicks the link and then shares the new opened link, it would work, so I'm labeling this solution 'good enough'.