Check if mouse button is down while hovering?

Question

I have a grid of boxes that a user interacts with on a website. If they click a box, it changes color. There are quite a lot of boxes and I'd like it to be less tedious, so it would be nice to have the functionality be: if mouse button is down and you hover the box, it changes states. Any thoughts?

There's some good answers here: http://stackoverflow.com/questions/2349764/jquery-is-mousedown-on-mouseover — MattDiamant, Feb 26 '13 at 20:33

score 36 · Answer 1 · edited May 11 '15 at 08:06

36

You can use the buttons property on the event passed to the hover callback to check what mouse buttons were pressed when the event was triggered.

For example, to detect whether the left button was pressed when an element is entered with the mouse, you could use:

myElement.addEventListener("mouseover", function(e){
    if(e.buttons == 1 || e.buttons == 3){
        //do some stuff
    }
})

Here is a demonstration of this idea: http://jsfiddle.net/Ah6pw/

Hold down the left mouse button and move your mouse through different list items.

edited May 11 '15 at 08:06

Jonathan

8,771
4
41
78

answered Feb 26 '13 at 20:27

Asad Saeeduddin

46,193
6
90
139

1

@Jonathan true, but it will work fine in other browsers by using `.which` instead of `.buttons`. – Oak May 11 '15 at 07:39
@Jonathan I haven't tested extensively, but this appears to work for me in Firefox as well. – Asad Saeeduddin Nov 17 '16 at 11:40
See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#Browser_compatibility for compatibility. – Adam Zerner Jun 17 '18 at 21:58
Works on most moder browsers. – Damjan Pavlica Jul 03 '18 at 14:00

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

I found something simmilar. Clicking the objects in some space and then little interaction. http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html (look for inspiration into the code)

Also these links could be usefull for you

edited May 23 '17 at 12:24

Community

1
1

answered Feb 26 '13 at 20:29

Stepo

1,036
1
13
24

score -4 · Answer 3 · answered Feb 26 '13 at 20:29

-4

See onmousedown & onmouseup events.

answered Feb 26 '13 at 20:29

del

140
2
10

Check if mouse button is down while hovering?

3 Answers3

Linked