Middle button click event

Question

I have this bit of code in my Chrome extension, so I can use <div href="url"> as a link. This used to work as expected until recently. (Left - open in current tab, Middle - open in new tab). Now it only registers left clicks.

$('div.clickable-href').on('click', function(e) {
  switch(e.which) {
    case 1:
      window.location = $(this).attr('href');
      break;
    case 2:
      window.open($(this).attr('href'));
      break;
    case 3:
      break;
  }
});

I use <div href="url"> and <span href="url"> for links so the browser doesn't display the status bar.

I have found some similar questions, but all answers suggest using .on('mousedown', (e) => {...}). I need this event to trigger only if there was a mousedown event followed by a mouseup event.
What's even more frustrating is that this used to work, but it no longer does so.

---

EDIT:
This is an issue for Chrome 55. On Linux (where I first noticed the anomaly) Chrome was already updated to v55. On my Windows system, it was v54, and middle click was working. Updating from 54 to 55 caused the same problems.

Sparhawk

Be aware that users might expect your "link" to also open in a new tab when doing a primary click holding <Ctrl> key (<Cmd> on Mac). You have to handle those cases too, and possible other platform-specific conventions you can't anticipate. Try to find a way to use a real anchor element for your link and let the browser handle it best. – Inexpungible

Answer 1

I noticed an issue with mouse button #3 in chrome (didn't test it on other browsers).

So here's a fix for it (add contextmenu to the triggering events):

---

EDIT
Thanks to Matevž Fabjančičuse's useful comment.

I confirm that since Chrome 55 (I updated to it a minute ago), the mouse middle click now triggers the new auxclick event.
So a click event can only be triggered by mouse button 1.

Notice that auxclick is triggered by mouse button 2 and 3.

Reference here.

$('div.clickable-href').on('click auxclick contextmenu', function(e) {
    e.preventDefault();
    console.log(e.which);
    console.log(e.type);
    
    if(e.type=="contextmenu"){
       console.log("Context menu prevented.");
       return;
    }
                           
    switch(e.which) {
        case 1:
            //window.location = $(this).attr('href');
            console.log("ONE");
            break;
        case 2:
            //window.open($(this).attr('href'));
            console.log("TWO");
            break;
        case 3:
            console.log("THREE");
            break;
    }
});

.clickable-href{
    width:20em;
    background-color:#DDD;
    text-align:center;
    padding:4em 0;
    border-radius:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clickable-href">
  CLICK ME - Test all 3 mouse buttons!
</div>

Blacklist

This only triggers 1 and 3 for me. I'm starting to think this is a Chrome for Linux issue... – Mudstone

This is an issue for Chrome 55. On Linux (where I first noticed the anomaly) Chrome was already updated to v55. On my Windows system, it was v54, and middle click was working. Updating from 54 to 55 caused the same problems. – Mudstone

I confirm that too. And I found the answer. ;) – Blacklist

Please use e.button instead of the non-standard e.which. – Inexpungible

@Diego: Thanks for the comment, JavaScript's e.which may not be a W3C standard (that is what they mean in their warning), it still is "widely supported" by all major browsers except IE 8 and priors (which are obselete in my opinion). See their browser compatibility table. Notice that e.button is not supported by IE8 and prior either. – Blacklist

@diego: Now, in my answer I used jQuery... The e.which is then coming from a jQuery element and jQuery's documentation is saying "Use event.which instead of event.button". --- There may be some change in W3C standards in the future, but for the present, e.which is perfectly cross-browser even if MDN is showing a warning about upcoming, yet unknown, changes to come (re-read it! They clearly talk about the future!). – Blacklist

Oh, right, I forgot that is not the native property but rather jQuery's normalized one. My comment only applies for native event handling. Regards. – Inexpungible

"click auxclick contextmenu" work properly in Chrome, FF, MS Edge, but not working in IE11 :| – Gabbard

Answer 2

In Linux Chrome 55 the following events occur for me:

Mouse Button 1: click
Mouse Button 2: contextmenu
Middle Mouse Button: auxclick

Rhizoid