How to get mouse position in jQuery without mouse-events?

Question

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

.pageX and .pageY can be read off of any event, not just .mousemove(). For example, perhaps you want to know exactly where a user clicked inside a particular div: Here's an example where we listen for a click event inside a particular div called #special. ..... http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F — Haim Evgi, Dec 23 '10 at 09:05
this may also help you to get the mouse pointer locations for responsive sites. http://www.kvcodes.com/2014/03/get-exact-top-left-position-mouse-pointer-location-using-jquery/ — Kvvaradha, Feb 16 '16 at 04:57

T.J. Crowder · Accepted Answer · 2013-09-17T07:54:36.967

164

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

edited Sep 17 '13 at 07:54

answered Dec 23 '10 at 09:04

T.J. Crowder

1,031,962
187
1,923
1,875

7

`$(window).load(function(e){ console.log(e.pageX,e.pageY); });` returns undefined for mouse position – spb Dec 22 '11 at 01:09
9

@T.J.Crowder Fairly obvious I think, he is saying that there is an event out there that does not provide the mouse position, to respond to the answer claiming that "nearly all (all?)" events provide the mouse position. – fabspro Aug 07 '13 at 13:15
2

In @T.J.Crowder defense he DID say NEARLY all. By responding with one that doesn't isn't all that helpful or purposeful. I think the point of this answer is showing the user that in his example he doesn't have to use mouse move... he can use anything. The user didn't specifically say getting it without an event, which T.J.Crowder points out nearly ALL code happens after SOME event. Of course he mentions this AFTER showing a viable way to make your own function that does what he needs. Answer helped me anyway. – Tyler Sep 18 '13 at 04:07
1

@Tyler: Thanks. :-) "nearly all" was a subsequent change, my initial language was too strong. – T.J. Crowder Sep 18 '13 at 06:51

score 29 · Answer 2 · answered Dec 23 '10 at 09:06

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

One problem with this is you don't have pageX and pageY or clientX and clientY when dragging in firefox... Any way to get pageY when dragging? — JamesTBennett, Jul 09 '15 at 17:42

Nicu Criste · Answer 3 · 2012-09-28T05:37:42.277

15

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.

edited Sep 28 '12 at 05:37

answered Sep 27 '12 at 13:21

Nicu Criste

3,072
1
19
9

score 6 · Answer 4 · answered May 14 '13 at 13:17

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

Oleksandr Tsurika · Answer 5 · 2019-03-14T09:29:12.763

2

use window.event - it contains last event and as any event contains pageX, pageY etc. Works for Chrome, Safari, IE but not FF.

edited Mar 14 '19 at 09:29

answered Mar 13 '19 at 12:20

Oleksandr Tsurika

930
9
16

score 0 · Answer 6 · answered Dec 18 '19 at 15:16

var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

Make an eventListener on the main object , in my case the document object, to get the mouse coords every frame and store them in global variables, and like that you can read mouse Y & Z whenever youlike , wherever you like.

score -1 · Answer 7 · edited Apr 24 '20 at 20:29

-1

I came across this, tot it would be nice to share...

What do you guys think?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

and boom, there we have it..

edited Apr 24 '20 at 20:29

marc_s

732,580
175
1,330
1,459

answered Aug 04 '15 at 11:56

Ande Caleb

1,163
1
14
35

How to get mouse position in jQuery without mouse-events?

7 Answers7

Linked

Related