Coder Perfect

How can I retrieve the mouse location without using events (moving the mouse)?


Is it possible to acquire the mouse position using JavaScript after the website loads and there is no mouse movement event (i.e. the mouse is not moved)?

Asked by Norbert Tamas

Solution #1

Real answer: No, it’s not possible.

Okay, I’ve come up with a solution. Overlay a div that spans the entire document on your page. Create (say) 2,000 × 2,000 a> elements, each 1 pixel in size (such that the:hover pseudo-class works in IE 6, see). For those a> elements that change a property (let’s say font-family), create a CSS:hover rule. Cycle through each of the 4 million a> elements in your load handler, checking currentStyle / getComputedStyle() until you find one with the hover font. Extrapolate backwards from this element to acquire the document’s coordinates.


Answered by Tim Down

Solution #2

Update 2020: This no longer works. It appears that the browser vendors have corrected this. Because chrome is used by so many browsers, it’s possible that it’s in its core.

Old answer: You can also hook mouseenter (this event is fired after page reload, when the mousecursor is inside the page). Extending Corrupted’s code should do the trick:

On mouseleave-event, you may also set x and y to null. So you may utilize the cursor to see if the user is on your website.

Answered by SuperNova

Solution #3

What you can do is create variables for the x and y coordinates of your cursor, update them whenever the mouse moves and call a function on an interval to do what you need with the stored position.

Of course, this has the drawback that it requires at least one initial mouse movement to work. We can find the cursor’s position regardless of whether it moves again as long as it changes its position at least once.

var cursor_x = -1;
var cursor_y = -1;
document.onmousemove = function(event)
 cursor_x = event.pageX;
 cursor_y = event.pageY;
setInterval(check_cursor, 1000);
function check_cursor(){console.log('Cursor at: '+cursor_x+', '+cursor_y);}

The preceding code sends a message every second about where your cursor is. I hope this information is useful.

Answered by JHarding

Solution #4

When rendering 2,000 x 2,000 a> elements, @Tim Down’s response is inefficient:

However, instead of rendering 4 million elements at once, binary search can be used. Instead, use four a> elements:

If your screen isn’t wider than 2048 pixels, you’ll only need to perform these instructions 11 times.

As a result, you’ll get a maximum of 11 x 4 = 44 a> elements.

If you don’t need to know the exact position of the mouse to the pixel, but an accuracy of 10px would suffice. You’d only need to draw 8 x 4 = 32 a> elements if you repeated the instructions at most 8 times.

Also, because the DOM is normally slow, producing and then destroying the a> elements is inefficient. Instead, you may just reuse the first four a> elements, changing their top, left, width, and height as you loop through the steps.

Creating four a> is also an overkill. Instead, you can reuse the same a> element in each rectangle when checking for getComputedStyle(). Instead of separating the search area into two x two a> elements, simply reuse one a> element by shifting it with the top and left style values.

So, all you need is a single a> element with a maximum width and height of 11 and a maximum top and left of 44 to get the exact mouse position.

Answered by Alex Peterson

Solution #5

You could try something similar to what Tim Down suggested – but instead of having elements for each pixel on the screen, create just 2-4 elements (boxes), and change their location, width, height dynamically to divide the yet possible locations on screen by 2-4 recursively, thus finding the mouse real location quickly.

For example, the right and left halves of the screen are taken up first, followed by the upper and lower halves. We already know which quarter of the screen the mouse is in, and we can do it again – find which quarter of this space…

Answered by AlexTR

Post is based on