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

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

Answer 3

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

$（window）.width（）和 $（window）.height（）将为您提供所需的信息。

Answer 4

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

如果希望鼠标相对于特定对象的位置，可以查看该对象的offsetTop和offsetLeft属性。（event.clientX - obj.offsetLeft）将是鼠标相对于对象的位置。

无论页面设计如何，如何在xy坐标处记录单击，该坐标仍然可靠

4 个答案:

更新