Listen for mouse extra-buttons in browser

Question

I would like to use extra button of my Logitech mouse in a web context.

I am on Ubuntu (but there is similar things in other OS), and I can bind these buttons with OS actions. -> Answer for: Is right click a Javascript event?

I would like to listen for this buttons in javascript, like normal buttons:

element.addEventListener(function(evt){
  switch(evt.which){
    case 1: //left click
    case 2: //middle click
    case 3: //right click
    case XX: //other buttons clicks
  }
}

https://stackoverflow.com/a/2405857/1064270

The only solution I see is a browser extension and native message passing , at least on Chrome.

So I am looking for a quicker path!

Answer 1

First of all, this is a question that should probably be on stackoverflow rather than here.

But I'll answer the question, because it popped up in google when I was looking for something similar, so others might wonder.

There is a standard specification for detecting up to two extra mouse buttons (apart from left, middle(wheel), right).

The problem is that it's not implemented by any browsers yet, probably because it may have implications for scam "trapping".

In the event object that is passed to your handler, there is a .buttons property, which is a bit map of which buttons are pushed (for multiple buttons at once).

document.addEventListener('mousedown', function(ev) {
  console.log('MB1', ev.buttons & 1) // 1 if clicked, 0 if not
  console.log('MB2', ev.buttons & 2)
  console.log('MB3', ev.buttons & 4)
  console.log('MB4', ev.buttons & 8) // usually browser-back
  console.log('MB5', ev.buttons & 16)// usually browser-forward
})

The last two won't register in any browser today, and you can't override the browser-back and browser-forward events, so it will change the page if you click those buttons (if they are set to that behavior).