jQuery：mousemove 事件 - 元素内的左、右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14047801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: mousemove event - left, right within element
提问by user1207524
I want to get mouse coords of a div, like this:
我想获取 div 的鼠标坐标，如下所示：
$("#box").mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
document.getElementById("coords").innerHTML = x + ", " + y; });
But I also want to be able to tell if the cursor was moved to left or right; I know I just have to compare current mouse position with previous one, but I have no idea how to do it in this case.
但我也希望能够判断光标是向左移动还是向右移动；我知道我只需要将当前鼠标位置与前一个位置进行比较，但我不知道在这种情况下该怎么做。
Any help appreciated. Thank you
任何帮助表示赞赏。谢谢
回答by Danilo
The jquery code to get the mouse position is the following
获取鼠标位置的jquery代码如下
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
Obviously you must have a div called "status"
显然你必须有一个名为“status”的div
<div id="status">0, 0</div>
To check if the cursor is moving to the left or to the right you're right, you must store the previous position and then compare it with the new.
要检查光标是向左移动还是向右移动，您是正确的，您必须存储以前的位置，然后将其与新位置进行比较。
Here I wrote you the complete example:
我在这里给你写了完整的例子：
_EDIT :
_编辑：
If you need to get the coords inside a div you need to know also the position of the div:
如果您需要获取 div 内的坐标，您还需要知道 div 的位置：
$(".div_container").mousemove(function(e){
var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
var relativeYPosition = (e.pageY - this.offsetTop);
$("#header").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
}).mouseout(function(){
$("#header").html("<p>Move mouse on the below blue div container! :)</p>")
});
To check if the mouse goes to the left or to the right, I used this sintax:
为了检查鼠标是向左还是向右，我使用了这个语法：
xPrev<e.pageX ? $('#lr').html("right") : $('#lr').html("left");
xPrev=e.pageX;
NB: This is the equivalent to:
注意：这相当于：
if(xPrev<e.pageX) {
$('#lr').html("right");
}
else {
$('#lr').html("left");
}
xPrev=e.pageX;
Here you have the working example: http://jsfiddle.net/cB9Wq/2/
这里有一个工作示例：http: //jsfiddle.net/cB9Wq/2/
回答by redrom
You can use the following solution:
您可以使用以下解决方案：
var plotSliderLastPostion = 0; //Placed outside the scope of function (fxp like private member)
slider.addEventListener(EVENT.MOUSE_MOVE, function(e){
var relativePlotBoxPositionX = e.clientX - rect.left;
//CHECK THAT CURSOR IS MOVING RIGHT OR LEFT
if(relativePlotBoxPositionX > plotSliderLastPostion) {
console.log("right");
plotSliderLastPostion = relativePlotBoxPositionX;
}
else {
console.log("left");
plotSliderLastPostion = relativePlotBoxPositionX;
}
}, true);
