Check if mouse button is down while hovering?

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?



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:

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


I found something simmilar. Clicking the objects in some space and then little interaction. (look for inspiration into the code)

Also these links could be usefull for you


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.