How to get mouse position in jQuery without mouse-events?
I would like to get current mouse position but I don't want to use:
$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});
because I just need to get the position and process the information
Solution 1:
I don't believe there's a way to query the mouse position, but you can use a mousemove
handler that just stores the information away, so you can query the stored information.
jQuery(function($) {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
// ELSEWHERE, your code that needs to know the mouse position without an event
if (currentMousePos.x < 10) {
// ....
}
});
But almost all code, other than setTimeout
code and such, runs in response to an event, and most events provide the mouse position. So your code that needs to know where the mouse is probably already has access to that information...
Solution 2:
You can't read mouse position in jQuery without using an event. Note firstly that the event.pageX
and event.pageY
properties exists on any event, so you could do:
$('#myEl').click(function(e) {
console.log(e.pageX);
});
Your other option is to use a closure to give your whole code access to a variable that is updated by a mousemove handler:
var mouseX, mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
}).mouseover(); // call the handler immediately
// do something with mouseX and mouseY
Solution 3:
I used this method:
$(document).mousemove(function(e) {
window.x = e.pageX;
window.y = e.pageY;
});
function show_popup(str) {
$("#popup_content").html(str);
$("#popup").fadeIn("fast");
$("#popup").css("top", y);
$("#popup").css("left", x);
}
In this way I'll always have the distance from the top saved in y and the distance from the left saved in x.
Solution 4:
Moreover, mousemove
events are not triggered if you perform drag'n'drop over a browser window.
To track mouse coordinates during drag'n'drop you should attach handler for document.ondragover
event and use it's originalEvent property.
Example:
var globalDragOver = function (e)
{
var original = e.originalEvent;
if (original)
{
window.x = original.pageX;
window.y = original.pageY;
}
}
Solution 5:
use window.event
- it contains last event
and as any event
contains pageX
, pageY
etc. Works for Chrome, Safari, IE but not FF.