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

How to log a click at an xy coordinate that remains reliable regardless of page design

本文关键字：坐标 xy 记录      更新时间：2023-09-26

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

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

我可以使用jQuery的offset（）来获得基于某个居中父元素的xy。但我把这个热图放在多个网站上。因此，假设每个站点的标记都是唯一的，我如何确定应该使用哪个顶级"包装器"元素来计算偏移量？

有什么更简单的方法我忽略了吗？

不仅保存单击的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/

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

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

$（window）.width（）和$（window）.height（）将为您提供所需内容。

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

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

相关文章：