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?

Answer 1

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.