Get click position on the window

Question

I am trying to get the position of the click when the user click whatever part of the window. I found this code in many tutorials but it seems not to work.

(function( $ ) {
    $( document ).ready(function() {

        $( window ).click(function( e ) {
            var offset = $(this).offset(),
                relativeX = (e.pageX - offset.left),
                relativeY = (e.pageY - offset.top);

                alert("X: " + relativeX + "  Y: " + relativeY);
        });
    });
})( jQuery );

Firefox console tells me "TypeError: offset is undefined" and I don't understand why it does not work.

Which is the right way to retrieve the click position on the window?

IronFlare · Accepted Answer · 2015-04-23T00:33:09.987

That code is really close to working. It will work correctly if you replace $(this) with $(e.target). This will get the left and top offsets of the click event, not the window itself.

(function($) {
    $(document).ready(function() {

        $(window).click(function(e) {
            var relativeX = (e.pageX - $(e.target).offset().left),
                relativeY = (e.pageY - $(e.target).offset().top);

                alert("X: " + relativeX + "  Y: " + relativeY);
        });
    });
})(jQuery);

http://jsfiddle.net/IronFlare/7wsamt87/

score 2 · Answer 2 · answered Apr 23 '15 at 00:22

2

If you're clicking on the window like that, you don't really need an offset.

$(window).click(function (e) {

        alert("X: " + e.pageX + "  Y: " + e.pageY);
    });

answered Apr 23 '15 at 00:22

enigma

3,476
2
17
30

score 1 · Answer 3 · answered Apr 23 '15 at 00:22

Your code is assuming the wrong this;

In your listener, this will be window, but $(window).offset(); makes no sense, which is why the method returns null or undefined.

Perhaps you meant to use document.documentElement, document.body or e.target which would be the <html>, <body> or the clicked node, respectively.

$(document.body).offset();

Riccardo · Answer 4 · 2015-04-23T00:32:20.860

0

I hope to have find a solution

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById("demo").innerHTML = coords;
}

<!DOCTYPE html>
<html>
<body>

<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) coordinates of the mouse pointer when it was clicked.</h2>

<p><strong>Tip:</strong> Try to click different places in the heading.</p>

<p id="demo"></p>



</body>
</html>

edited Apr 23 '15 at 00:32

answered Apr 23 '15 at 00:24

Riccardo

66
2
16

1

This question is about the _click_ event, not _mousemove_. Also, how far back is this attempting to support? IE5? – Paul S. Apr 23 '15 at 00:25
1

Attribution: http://stackoverflow.com/questions/7790725/javascript-track-mouse-position#answer-7790764 – Stryner Apr 23 '15 at 00:27
Stryner I have soon removed my comment, there is no need to keep this comment – Riccardo Apr 23 '15 at 00:35

Get click position on the window

4 Answers4