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

Question

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()?

I'm missing the originalEvent property of the mousemove event? Have you tried inspecting that? — Bergi, Apr 12 '12 at 09:36
originalEvent contains event specific data: http://api.jquery.com/category/events/event-object/ in fact it contains the `e.originalEvent.which` parameter that I'm looking for, but it's always `1` no matter which mouse button is pressed! Quite weird. — AlexStack, Apr 12 '12 at 10:11

Dominic · Accepted Answer · 2012-04-13T15:32:07.127

3

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

edited Apr 13 '12 at 15:32

answered Apr 12 '12 at 19:49

Dominic

62,658
20
139
163

4

if the user clicks inside the slider and drags the mouse outside it and release the button there, the $slider.mouseup() will not fire up. that is the main problem that caused me to ask this question here. – AlexStack Apr 13 '12 at 07:20
1

ah ok, you will have to attach the mouseup event to the document then (edited) – Dominic Apr 13 '12 at 15:31

score 1 · Answer 2 · answered Jun 15 '16 at 06:52

1

<body>
<div id="div" style=" height: 100px; border:1px solid red"></div>

<script>
  document.mouseState=-1; //global check mouse state

  document.onmousedown=function(e){
    document.mouseState=e.button;
  }
  document.onmouseup=function(e){
    document.mouseState=-1;
  }

  var d=document.getElementById('div');
  d.onmousemove= function(e){
    d.innerHTML+='; '+document.mouseState;

  }

</script>
</body>

answered Jun 15 '16 at 06:52

ZPKSoft

31
4

Consider explain the context as well. – Vinoth Krishnan Jun 15 '16 at 06:58
1

document.mouseState=-1; //<- add and initial property to object document, document.onmousedown and document.onmouseup- check mouse state and refresh property document.mouseState. Now in function obiect.onmousemove we use this information. – ZPKSoft Jun 15 '16 at 11:36

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

2 Answers2