0

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

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

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

我忽略了一些更简单的方法吗？

4

4 回答 4

2

如何不仅保存点击的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/

于 2012-02-21T21:02:24.170 回答
0

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

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

于 2012-02-21T21:01:42.043 回答
0

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

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

于 2012-02-21T21:07:23.060 回答
0

您是否尝试过使用该<body>元素？我知道在 HTML5 中没有必要，但我从未遇到过不使用它的实例（并且涉及点击）。

于 2012-02-21T20:59:11.240 回答