How to detect middle mouse button click?

Question

All of the questions I've seen on how to detect a middle mouse click in JavaScript are related to jQuery, but I'm wondering how I can detect middle mouse button clicks with regular JavaScript. I tried using onClick(), but it only appears to work for the left mouse button.

Is there a JavaScript function that can detect both left and middle mouse button clicks or, if not, that can detect middle mouse button clicks?

The reason I ask is that I want to make a function call when links are clicked, irregardless of whether the left or middle mouse button was used.

Search before post it: http://stackoverflow.com/questions/5833928/jquery-alert-when-middle-mouse-button-clicked ;). Sorry Nate, I have not readed it well! — Gaucho_9, Jan 20 '14 at 00:07
@Gaucho_9 Read the question before reprimanding ;-) I'm trying to figure out if it's possible to track middle mouse button clicks *without* jQuery. — Nate, Jan 20 '14 at 00:08

score 37 · Accepted Answer · edited Mar 20 '16 at 00:08

37

onclick is not tied to a mouse, but more on the target element itself.

Here's how to detect whether an element is middle clicked:

document.body.onclick = function (e) {
  if (e && (e.which == 2 || e.button == 4 )) {
    console.log('middleclicked')
  }
}

edited Mar 20 '16 at 00:08

fiatjaf

11,479
5
56
72

answered Jan 20 '14 at 00:18

Schien

3,855
1
16
29

1

I have added another example where you can pass in additional parameters. Note how the function returns a function itself, and the implicit "e" is on the call stack of the enclosed function. I don't usually run into the context to explain such syntax. Thanks for the opportunity, especially without using jQuery! – Schien Jan 20 '14 at 00:23
1

@fiatjaf thanks for editing the answer. just want to point out that the edit attaches the onclick event to document.body whereas my answer attaches to specific dom nodes. the edit alters my answer significantly. since the OP already got his answer I don't mind whether you revert the edit at this point. – Schien Mar 20 '16 at 01:02
2

I'm sorry for the big edit, but StackOverflow is not a site destined only to answer specific people who ask questions, but a big encyclopedia on how to do code things. Your answer had, I think, useful information not easy to find anywhere else, but it was confusing. My edit was done to make it more useful and easier to read for future people reaching this question. Please re-edit if you think there's something wrong. – fiatjaf Mar 20 '16 at 03:47
7

This only works on a button element. To detect a middle click on any element you have to compromise and use `.addEventListener('mousedown', ...`. Technically not a complete 'click' event as user may move their mouse. – Advait Junnarkar Mar 02 '20 at 05:11

score 4 · Answer 2 · answered Jan 20 '14 at 00:19

You have to use stuff that's already built into the DOM and Javascript engines and then put in cases where browsers differ (this is why jQuery is normally used).

document.getElementById("myBtn").onclick = function(event) {
    event = event || window.event

    // Now event is the event object in all browsers.

    // Note: event.target - the reference to clicked element. IE uses event.srcElement
    // In W3C there is a button property which works same in all browsers except IE:
    // 0 - left button, 1 - middle button, 2 - right button
    // For IE, left button = button & 1 (the 1st bit) is set to 1
    // right button = button & 2 (the 2nd bit) is 1
    // and middle button = button & 4 (the 3rd bit)
    var left = event.button == 0 || 1 == event.button&1;
    var middle = event.button == 1 || 1 == event.button&2;
    var right = event.button == 2 || 1 == event.button&3;

    // Put your code here
}

`event.button == 1` also triggers `1 == event.button&1`. So this code is broken. — Vadzim, Feb 14 '18 at 20:23
Good catch! So you need to wrap this in an IE section and non-IE section. — disrvptor, Mar 09 '18 at 00:07

score 3 · Answer 3 · answered Jan 20 '14 at 00:12

3

You'll have to detect the event 2

event = event || window.event; //make sure to pass the event into the function
if (event.which == 2) {
    //do code..
}

answered Jan 20 '14 at 00:12

Sterling Archer

22,070
18
81
118

score 3 · Answer 4 · edited Apr 12 '17 at 08:12

3

The code below could help you. It can detect which mouse button the user clicked. e.which == 2 is for the middle button.

<script type="text/javascript">

function detect_button(e){  
    e = e || window.event;

    if (e.which == null){
        button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
    }
    else{
        button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
    }

    alert(button);
}

</script>

edited Apr 12 '17 at 08:12

Angel Politis

10,955
14
48
66

answered Jan 20 '14 at 00:13

Josan

692
1
5
27

9

If you're going to copy code linked from a comment, at least explain it first. – Sterling Archer Jan 20 '14 at 00:14

score 3 · Answer 5 · answered Aug 11 '21 at 02:23

3

The answers/solutions that are already here might work on others, but it doesn't work on me. So my solution is: Instead of using the click event, I use the mousedown event

window.onmousedown = (event) => {
    if (event.button == 1 || event.buttons == 4) {
        console.log('middle mouse');
    }
}

or

window.addEventListener('mousedown', (event) => {
   if (event.button == 1 || event.buttons == 4) {
      console.log('middle mouse');
   }
});

answered Aug 11 '21 at 02:23

Danspotnytool

43
1
5

The `auxclick` event is a valid alternative to the somewhat-clunky 'mousedown' event, although support for the event is [lacking in IE11 and Safari as of Jan 2022](https://caniuse.com/?search=auxclick). – arcanemachine Jan 02 '22 at 23:28

How to detect middle mouse button click?

5 Answers5

Linked