I'm writing an HTML5 canvas drawing app, and I need to be able to tell whether or not the left mouse button is pressed down during a mousemove event. On Chrome, this works:
if (event.which == 1) { <do stuff> }
But in FireFox, event.which always is 1, no matter whether or not the button is pressed.
How can I detect whether the mouse button is pressed during a mousemove event?
The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
The "mouse clicked" event. This MouseEvent occurs when a mouse button is pressed and released.
The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
Mouse event typesMouse button is clicked/released over an element. mouseover/mouseout. Mouse pointer comes over/out from an element. mousemove.
In short, you can't. MDN, for example, explains:
When a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer. The event's button property can be used to determine which button was pressed, where possible values are 0 for the left button, 1 for the middle button and 2 for the right button. If you've configured your mouse differently, these values may be different.
...
The button and detail properties only apply to the mouse button related events, not mouse movement events. For the mousemove event, for example, both properties will be set to 0.
If you want, you can set global mousedown
and mouseup
handlers that set flags appropriately and then at any given point in time you can with relative degree of accuracy determine if/which mouse button is pressed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With