CODEWITHSUNDEEP
javascript
bernie2436
bernie2436

Reputation: 23901

capturing simultaneous left and right mouse button clicks in javascript

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?

Upvotes: 5

Views: 3915

Answers (3)

Iulian Preda
Iulian Preda

Reputation: 59

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

Upvotes: 1

John Weisz
John Weisz

Reputation: 31934

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.
    }
});

Upvotes: 2

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

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.

Upvotes: 11

Related Questions