detect mouse direction

Question

I am trying this code to detect if the mouse direction is going up or down:

<html>  
    <head></head>
    <body>
        <div style="width: 500px; height: 500px; background: red;"></div>
    </body>
</html>

var mY = 0;
$('body').mousemove(function(e) {
    mY = e.pageY;
    if (e.pageY < mY) {
        console.log('From Bottom');
        return;

    } else {
        console.log('From Top');
    }

});

However this code doesn't work was i expect. Console log always show "from top"

Any idea ?

demo

score 11 · Accepted Answer · answered Dec 09 '11 at 18:50

var mY = 0;
$('body').mousemove(function(e) {

    // moving upward
    if (e.pageY < mY) {
        console.log('From Bottom');

    // moving downward
    } else {
        console.log('From Top');
    }

    // set new mY after doing test above
    mY = e.pageY;

});

Karmic Coder · Answer 2 · 2011-12-09T20:58:53.553

4

You are setting my = e.pageY before comparing it, which means the comparison will always be equal (and therefore false.)

try it like this

var mY = 0;
$('body').mousemove(function(e) {

    if (e.pageY < mY) {
        console.log('From Bottom');

    } else {
        console.log('From Top');
    }
    mY = e.pageY;

});

edited Dec 09 '11 at 20:58

answered Dec 09 '11 at 18:49

Karmic Coder

17,569
6
32
42

1

Be careful to remove the return statement here otherwise `mY` doesn't get set after upward mouse movement – maček Dec 09 '11 at 18:53
How is it that that only answer, that is currently listed, that won't work is the highest rated answer? – xbrady Dec 09 '11 at 19:01

score 1 · Answer 3 · edited Dec 10 '11 at 00:51

1

e.pageY is always equal to mY because you set mY to e.pageY just before the if statement.

edited Dec 10 '11 at 00:51

Anne

26,765
9
65
71

answered Dec 09 '11 at 18:50

schnozzinkobenstein

795
1
8
14

score 0 · Answer 4 · answered Feb 11 '14 at 10:12

if you use if/else it will always output 'Going Down', even though e.pageY == mY.

Use 2 if-statements instead!

var mY = 0;
$('body').mousemove(function(e) {

// moving upward
if (e.pageY < mY) {
    console.log('From Bottom');

// moving downward
}
if (e.pageY > mY) {
    console.log('From Top');
}

// set new mY after doing test above
mY = e.pageY;

});

just copied the code from macek and replaced the 'else' with an 'if(...)' btw

score 0 · Answer 5 · answered Mar 06 '15 at 07:26

The easiest way to do it. This way you can detect direction changes:

var tempMouseY=0;
$('body')
.mousemove(function(e) {
    moveY = -(tempMouseY-e.pageY);
    tempMouseY = e.pageY;
    if (moveY<0) {
        console.log('From Bottom');
    } else {
        console.log('From Top');
    }

 });

Rion Williams · Answer 6 · 2011-12-09T18:57:11.303

You needed to set your mY value after determining the direction (previously you were setting it prior - thus would always receive a specific result)

Code:

//Values starts at middle of page
var mY = $('window').height()/2;

//Compares position to mY and Outputs result to console
$('body').mousemove(function(e) {
    if (e.pageY < mY) {
        console.log('Going Up');   
    } 
    else {
        console.log('Going Down');
    }
    mY = e.pageY;
});

Working Example

detect mouse direction

6 Answers6

Linked