How to check the current mouse button state Using Javascript

Question

I want the state of mouse on Down state or on up state

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

function mouseMove(ev) {

    mouseState="";
    //How can I know the state button of mouse button from here 
    if(mouseState=='down') {
        console.log('mouse down state')
    }

    if(mouseState=='up')  {
        console.log('mouse up state')
    }
}

function mouseDown(ev) {
    console.log('Down State you can now start dragging');
    //do not write any code here in this function
}

function mouseUp(ev) {
    console.log('up state you cannot drag now because you are not holding your mouse')
    //do not write any code here in this function
}

When I moved my mouse, program should show the required value of mouseState up or down on console for now

This problem is related to [chrome issue](http://www.pmarks.net/posted_links/chromium_up_down_bug.html). And IE is also showing the same problem. Is there any solution — vusan, Aug 31 '12 at 05:54
I want to know the state of mouse button because of [this](http://stackoverflow.com/questions/12191743/how-to-know-the-current-state-of-mouse-buttonmouseup-state-or-mousedown-state) problem. — vusan, Jul 02 '13 at 11:37

score 3 · Answer 1 · answered Aug 31 '12 at 05:53

3

You could check the MouseEvent.which property.

function mouseMove(ev) {
    if(ev.which==1) {
        console.log('mouse down state with left click');
    } else if(ev.which==3)  {
        console.log('mouse down state with right click');
    } else {
        console.log('mouse update');
    } 
}

answered Aug 31 '12 at 05:53

xdazz

158,678
38
247
274

1

Sorry but now I am not using this solution as it won't solve for IE. Is there any other Idea? – vusan Sep 03 '12 at 08:59
4

Bzzt. The Mousevent.which property tells which button caused the most recent 'mousedown' or 'mouseup' event. It is simply copied into the 'mousemove' event. It does _not_ reflect the current state of the mouse button. Its name seems to indicate it does -and I fervently wish it did- but it doesn't. (And it's not just an IE or browser version issue:-) – Chuck Kollars Aug 03 '13 at 16:18
@ChuckKollars - The good news is [we have `buttons` now](https://stackoverflow.com/a/48970682/157247). – T.J. Crowder Jan 25 '22 at 09:25

score 2 · Answer 2 · answered Aug 31 '12 at 05:50

You just have to create a variable for it.

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;
var mouseState = "up";

function mouseMove(ev) {

    //How can I know the state of mouse from here 
    if(mouseState=='down') {
        console.log('mouse down state')
    }

    if (mouseState=='up')  {
        console.log('mouse up state')
    }
}

function mouseDown(ev) {
    mouseState = "down";
    console.log('Down State you can now start dragging');
    //do not write any code here in this function
}

function mouseUp(ev) {
    mouseState = "up";
    console.log('up state you cannot drag now because you are not holding your mouse')
    //do not write any code here in this function
}

You should have a look at the event on "mousemove", by logging it into the console. There might be a property there that shows that state of the mouse, just like the keypress event has a property which tells you if the shift button is pressed. But that might not be cross browser compatible.

How to check the current mouse button state Using Javascript

2 Answers2

Linked