获取 window 上的点击位置

Question

我试图在用户单击 window 的任何部分时获取单击的位置。我在许多教程中找到 this code，但它似乎不起作用。

(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 控制台告诉我 "TypeError: offset is undefined" 但我不明白为什么它不起作用。

检索 window 上的点击位置的正确方法是什么？

Answer 1

您的代码假设错误this；

在您的侦听器中，this 将是 window，但 $(window).offset(); 没有任何意义，这就是方法 returns null 或 undefined.

也许您打算使用 document.documentElement、document.body 或 e.target，它们分别是 <html>、<body> 或单击的节点。

$(document.body).offset();

Answer 2

如果您像那样单击 window，则实际上不需要偏移量。

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

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

Answer 3

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>

Answer 4

该代码非常接近工作。如果将 $(this) 替换为 $(e.target)，它将正常工作。这将获取点击事件的左侧和顶部偏移量，而不是 window 本身。

(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/

获取 window 上的点击位置

Get click position on the window

javascript

jquery

position

offset