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.

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>

Answer 2

In Linux Chrome 55 the following events occur for me:

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