检测鼠标方向答案

【问题标题】：detect mouse direction检测鼠标方向
【发布时间】：2012-01-17 00:33:43
【问题描述】：

我正在尝试这段代码来检测鼠标方向是向上还是向下：

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

});

但是我期望这段代码不起作用。控制台日志始终显示“从顶部”

有什么想法吗？

demo

【问题讨论】：

标签： javascript jquery mouseevent direction

【解决方案1】：

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;

});

【讨论】：

【解决方案2】：

你在比较之前设置my = e.pageY，这意味着比较总是相等的（因此是错误的。）

这样试试

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

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

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

});

【讨论】：

小心删除这里的return语句，否则mY在鼠标向上移动后不会被设置
目前列出的唯一一个不起作用的答案是评分最高的答案，这是怎么回事？

【解决方案3】：

e.pageY 始终等于 mY，因为您在 if 语句之前将 mY 设置为 e.pageY。

【讨论】：

【解决方案4】：

您需要在确定方向后设置您的mY 值（之前您已设置它 - 因此总是会收到特定的结果）

代码：

//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

【讨论】：

【解决方案5】：

如果您使用 if/else，它将始终输出“Going Down”，即使 e.pageY == mY。

改用 2 个 if 语句！

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;

});

只是从 macek 复制代码并将 'else' 替换为 'if(...)' btw

【讨论】：

【解决方案6】：

最简单的方法。这样您就可以检测方向变化：

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

 });

【讨论】：