检测鼠标方向
Posted
技术标签:
【中文标题】检测鼠标方向【英文标题】：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
【问题讨论】：
【参考方案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');
);
【讨论】：
以上是关于检测鼠标方向的主要内容，如果未能解决你的问题，请参考以下文章