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

Question

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

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

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

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

Answer 1

不仅保存点击的x/y坐标，还保存宽度/高度怎么样？视口(viewport)的。这样您就可以获取相对于视口(viewport)的点击位置并计算点击实际发生在内容上的位置:

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

您可以通过仅在视口(viewport)尺寸发生变化时获取视口(viewport)尺寸来对此进行优化:

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

更新

对于居中的页面，您可以从视口(viewport)中心获取坐标:

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/