detect mouse direction

C

6

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

Cly answered 9/12, 2011 at 18:46 Comment(0)

S

11

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;

});

Sillsby answered 9/12, 2011 at 18:50 Comment(0)

W

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;

});

Willow answered 9/12, 2011 at 18:49 Comment(2)

Be careful to remove the return statement here otherwise mY doesn't get set after upward mouse movement – Streeto 9/12, 2011 at 18:53

How is it that that only answer, that is currently listed, that won't work is the highest rated answer? – Boardwalk 9/12, 2011 at 19:1

C

1

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

Coverup answered 9/12, 2011 at 18:50 Comment(0)

E

0

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

Eddie answered 9/12, 2011 at 18:52 Comment(0)

K

0

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

Kinnard answered 11/2, 2014 at 10:12 Comment(0)

S

0

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');
    }

 });

Sackman answered 6/3, 2015 at 7:26 Comment(0)

Recommended topics

Hot tags