如何记录 xy 坐标上的点击，无论页面设计如何，该点击都保持可靠

Question

我正在创建网站热图。我知道如何获取单击的 xy 坐标，但在居中 div 的页面上，单击的 xy 坐标根据用户的浏览器窗口宽度而变化。

如何记录一致的 xy，以便以后无论窗口大小如何都可以显示单击的位置？

我可以使用 jQuery 的 offset() 来获取基于某些居中父元素的 xy 。但我将此热图放置在多个站点上。因此，鉴于每个站点的标记都是唯一的，我如何确定应使用哪个顶级“包装器”元素来计算偏移量？

有没有一些我忽略的更简单的方法？

Answer 1

不仅保存点击的 x/y 坐标，还保存视图的 width/height 怎么样？ -港口。这样，您就可以获取相对于视口的点击位置，并计算点击实际发生在内容上的位置：

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = $(window).width(),
        h = $(window).height();
});

您可以通过仅在视口尺寸发生变化时获取视口尺寸来优化这一点：

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = windowWidth,
        h = windowHeight;
});

更新

以您为中心的页面可以从视口中心获取坐标：

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = (event.pageX - (windowWidth / 2)),
        y = event.pageY;
});

这将导致页面右侧任何内容的正 x 尺寸和页面右侧任何内容的负 x 尺寸页面的左侧。

这是一个演示： http://jsfiddle.net/aWBFM/

Answer 2

您是否尝试过使用 元素？我知道在 HTML5 中这不是必需的，但我还没有遇到过不使用它的实例（并且涉及点击）。

Answer 3

好吧，根据 offset() 文档，它检索相对于文档的坐标，这就是您想要的。您需要做的是获取窗口的高度和宽度。然后使用一些数学计算窗口和地图之间的距离。

$(window).width() 和
$(window).height() 将为您提供所需的内容。

Answer 4

您应该能够通过查看 event.clientX 和 event.clientY 来获取鼠标相对于页面左上角的位置。

如果您想要鼠标相对于特定对象的位置，可以查看该对象的 offsetTop 和 offsetLeft 属性。 (event.clientX - obj.offsetLeft) 将是鼠标相对于对象的位置。