capturing simultaneous left and right mouse button clicks in javascript

Question

What is the best way to capture a left AND right mouse click in javascript? I'm not using jQuery (it's next on my to-learn list), just javascript for now. Basically, I want to do something like

 onClick()=javascript:rightClickFunction() // do right click function
 onContextMenu()=javascript:leftClickFunction() /
 onBoth() ???

The only thing I could find on stackoverflow was: How to distinguish between left and right mouse click with jQuery

How should I capture the double-button click? Can i check if the opposite button is also clicked during the R and L button routines?

I'm pretty sure only one event at a time is triggered in JavaScript. — gen_Eric, May 15 '12 at 21:10

score 11 · Answer 1 · answered May 15 '12 at 21:15

You could track which mouse buttons are down with some boolean variables like this:

var leftButtonDown = false;
var rightButtonDown = false;

$(document).mousedown(function() {
    if(e.which == 1) {
        leftButtonDown = true;
    } else if (e.which == 3) {
        rightButtonDown = true;
    }
});

$(document).mouseup(function() {
    if(e.which == 1) {
        leftButtonDown = false;
    } else if (e.which == 3) {
        rightButtonDown = false;
    }
});

$(document).click(function() {
    if(leftButtonDown && rightButtonDown) {
        // left and right buttons are clicked at the same time
    }
});

If both booleans are true, the right and left mouse buttons are both being clicked.

e.which is deprecated now and not guaranteed to work https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which — mishadr, Jan 05 '23 at 13:22

score 2 · Answer 2 · edited May 23 '17 at 10:30

Pure Javascript solution based on the answer by Elliot:

var leftButtonDown = false;
var rightButtonDown = false;

document.addEventListener("mousedown", function () {
    if (e.which == 1) {
        leftButtonDown = true;
    } else if (e.which == 3) {
        rightButtonDown = true;
    }
});

document.addEventListener("mouseup", function () {
    if (e.which == 1) {
        leftButtonDown = false;
    } else if (e.which == 3) {
        rightButtonDown = false;
    }
});

document.addEventListener("click", function () {
    if (leftButtonDown && rightButtonDown) {
        // Click with both LMB and RMB.
    }
});

score 1 · Answer 3 · answered Apr 18 '20 at 03:31

For anyone still interested in a recent answer, as event.which is deprecated you can use the following code with ES6 syntax.

let leftButtonDown = false;
let rightButtonDown = false;

document.addEventListener("mousedown", (e) => {
    // left click
    if (e.button === 0) {
        leftButtonDown = true;
    }
    // right click
    if (e.button === 2) {
        rightButtonDown = true;
    }
    if (leftButtonDown && rightButtonDown) {
        // insert code here
    }
});

document.addEventListener("mouseup", (e) => {
    if (e.button === 0) {
        leftButtonDown = false;
    }
    if (e.button === 2) {
        rightButtonDown = false;
    }
});

If you want to prevent the context menu from popping up you can try a variation of this:

let leftButtonDown = false;
let rightButtonDown = false;

document.addEventListener("mousedown", (e) => {
    // left click
    if (e.button === 0) {
        leftButtonDown = true;
    }
    // right click
    if (e.button === 2) {
        rightButtonDown = true;
    }
    if (leftButtonDown && rightButtonDown) {
        // insert code here
    }
});

document.addEventListener("mouseup", (e) => {
    if (e.button === 0) {
        leftButtonDown = false;
    }
});

document.addEventListener("contextmenu", (e) => {
    if (leftButtonDown && rightButtonDown) {
        e.preventDefault();
    }
    rightButtonDown = false;
});

Modern browsers mouse buttons mapping:

left click = 0
middle click = 1
right click = 2

IE8 and earlier mouse buttons mapping:

left click = 1
middle click = 4
right click = 2

capturing simultaneous left and right mouse button clicks in javascript

3 Answers3