AlexStack AlexStack - 5 months ago 14
Javascript Question

which mouse key is pressed in mousemove() event handler?

I use JQuery 1.7 for handling events.

function objToStr(obj) {
return ...string representation of the object
}
$slider.mousedown(function(e) {
console.log("$slider.mousedown:\n" + objToStr(e) );
});

$slider.mousemove( function(e) {
console.log("$slider.mousemove:\n" + objToStr(e) );
});


and here is the result:

$slider.mousedown:
altKey = false
attrChange = undefined
attrName = undefined
bubbles = true
button = 0
buttons = undefined
cancelable = true
clientX = 319
clientY = 13
ctrlKey = false
currentTarget = object
data = null
delegateTarget = object
eventPhase = 3
fromElement = undefined
handleObj = object
isDefaultPrevented = (function)
isImmediatePropagationStopped = (function)
isPropagationStopped = (function)
jQuery17209754494933906718 = true
metaKey = false
offsetX = undefined
offsetY = undefined
originalEvent = object
pageX = 319
pageY = 13
preventDefault = (function)
relatedNode = undefined
relatedTarget = null
screenX = 2876
screenY = 223
shiftKey = false
srcElement = undefined
stopImmediatePropagation = (function)
stopPropagation = (function)
target = object
timeStamp = 869699957
toElement = undefined
type = "mousedown"
view = object
which = 1


$slider.mousemove:
currentTarget = object
data = null
delegateTarget = object
exclusive = undefined
handleObj = object
isDefaultPrevented = (function)
isImmediatePropagationStopped = (function)
isPropagationStopped = (function)
isTrigger = true
jQuery17209754494933906718 = true
namespace = ""
namespace_re = null
preventDefault = (function)
result = undefined
stopImmediatePropagation = (function)
stopPropagation = (function)
target = object
timeStamp = 1334151903323
type = "mousemove"


I need to access
e.which
for
mousemove
but apparently it is not passed to the event handler?

I don't want to use the flag algorithm suggested in jQuery: Detecting pressed mouse button during mousemove event. Because if the user drags the mouse button outside the browser window and release it there, when the mouse comes back to the browser window, it is still thought to be pressed. Then I have to add handlers for when the mouse leaves the window as well and it's too much. Is there a simpler way to know which mouse button is pressed in the event handler of
mousemove()
?

Answer

I would imagine because its a move event it wasn't considered paramount or efficient to find out what key was pressed at the time especially since the event is fired so frequently. So you need to have an event for mouseup and mousedown.

var leftMButtonDown = false;

$slider.mousedown(function(e) {
    if(e.which === 1) leftMButtonDown = true;
});

$(document).mouseup(function(e) {
    if(leftMButtonDown && e.which === 1) leftMButtonDown = false;
});

$slider.mousemove(function(e) {
    if(leftMButtonDown == true) {
        console.log('Left mouse button was down on mousemove event');
    }
});

And you would have to add more variables for the right mouse button etc

Comments