logo标签列表

检测鼠标方向。

javascriptjquerymouseeventdirection
6
我尝试使用以下代码来检测鼠标移动的方向是向上还是向下：

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

});

然而，这段代码并没有像我期望的那样工作。控制台日志总是显示“from top”。

你有任何想法吗？

演示

6个回答
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;

});
4
您在比较前设置了my = e.pageY，这意味着比较始终相等（因此为false）。请尝试按照以下方式进行。
var mY = 0;
$('body').mousemove(function(e) {

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

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

});
1
注意在这里删除返回语句，否则在鼠标向上移动后 mY 将不会被设置。 - maček
为什么目前列出的唯一一个不可行的答案是最高评分的答案？ - xbrady
1

e.pageY 总是等于 mY，因为在 if 语句之前你将 mY 设置为 e.pageY。

0

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

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

 });
0
你需要在确定方向后设置你的 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;
});

工作示例

0

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

请改用两个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那里复制了代码，并用'if（...）'替换了'else'

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接