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

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

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

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

---

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

您是否尝试过使用

元素？我知道在HTML5中这是不必要的，但我从来没有遇到过一个不使用它的实例（其中涉及到单击）。

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

$（窗口）.width（）和

---

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

不仅保存单击的

x

/

y

坐标，还保存查看端口的

宽度

/

高度

如何。这样，您就可以获得单击相对于视图端口的位置，并计算单击在内容上实际发生的位置：

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

维度为负

---

这里是一个演示：

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

---

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

对站点的包装器元素进行“猜测”的编程听起来可能不可靠。是否有可能采用浏览器宽度和x偏移量，并使用它们计算从中心而不是从左侧的x偏移量？我想这取决于你的最终目标。我完全同意猜测包装器不是一种选择。天哪，可能有多个包装。我知道存在热图服务，所以这是一个可以解决的问题。是标签的孩子们造成了问题。如果单击位于居中浮动的包装内，则x/y会根据窗口宽度发生变化。“将是鼠标相对于对象的位置。”对，并且问题是相对于对象的。这是我问题的关键：由于这个热图将部署在多个站点上，我不知道点击应该相对于哪个父包装器（如果有的话）。所以你建议根据页面内容是否居中来记录不同的点击？但是页面上的任何div都可能居中，即使是嵌套得很深的div，在调整窗口大小时也可能会影响其xy位置。