Php 确定所有屏幕分辨率的鼠标点击

我这里有一些简单的JavaScript，用于确定在浏览器中单击的位置：

var clickDoc = (document.documentElement != undefined && document.documentElement.clientHeight != 0) ? document.documentElement : document.body;
var x = evt.clientX;
var y = evt.clientY;
var w = clickDoc.clientWidth != undefined ? clickDoc.clientWidth : window.innerWidth;
var h = clickDoc.clientHeight != undefined ? clickDoc.clientHeight : window.innerHeight;
var scrollx = window.pageXOffset == undefined ? clickDoc.scrollLeft : window.pageXOffset;
var scrolly = window.pageYOffset == undefined ? clickDoc.scrollTop : window.pageYOffset;

params = '&x=' + (x + scrollx) + '&y=' + (y + scrolly) + '&w=' + w + '&random=' + Date();

所有这些数据都存储在数据库中。稍后，我检索它并显示该页面上所有单击发生的位置。如果我在一个分辨率下进行所有单击，然后以相同的分辨率显示，则效果很好，但事实并非如此。可以使用大量的分辨率

在我的测试用例中，我单击屏幕分辨率为1260x1080的屏幕。我检索了所有数据并以相同的分辨率显示。但当我使用不同的显示器（尝试了1024x768和1920x1080）时，标记会移到错误的位置

我的问题是，如果我正在存储客户端的宽度和高度，以及单击的x/y位置。如果3个不同的用户都使用不同的屏幕分辨率单击同一个单词，并且第4个用户查看所有这些单击发生的位置，我如何正确地绘制x/y位置，以显示每个人都在同一空间单击，而不是在同一个位置单击决议草案

如果这属于更好的部分，也请让我知道

：：编辑：：：在应用布罗克的建议后，我附加了两个屏幕截图。我以不同的分辨率单击了每段开头的单词

If

。在两种分辨率下查看时，在同一分辨率下发生的单击直接在单词上，当分辨率较高或较低时，它会切换到分别是右边或左边

---

如果您需要在文档中存储用户单击的位置，那么您现在所做的应该可以

---

如果需要在浏览器窗口中存储位置（为什么？），还必须存储浏览器分辨率，或基于分辨率的标准化值。

更新：
额外的问题要考虑，这个问题可能不是完全可解的……

在不同的屏幕大小下，边距（对于居中内容）等内容会有所不同。在补偿更改的边距后，需要调整到“屏幕大小”真正成为

clientWidth

的位置

此外，尽管如此，一个页面可能在不同的屏幕分辨率（加上用户浏览器窗口的大小）下呈现出不同的效果。如果这导致行的换行方式不同，那么就真的无法进行比较

---

原始答案：

“如果我正在存储客户端的宽度和高度，以及单击的x/y位置。如果3个不同的用户以不同的屏幕分辨率单击同一个单词，而第4个用户查看所有这些单击发生的位置，我如何正确绘制x/y位置？”

这应该只是一个简单的缩放问题

伪代码：
鉴于：

然后：

TargetMousePosition     = CapturedMousePosition * TargetScreenSize / CapturedScreenSize
EG: [42 * 1024 / 1260, 69 * 768 / 1080] -- Be sure to round to *nearest* integer.

---

我不知道你的要求，但是如果有可能的话，考虑记录DOM元素的路径，而不是鼠标位置。从这些屏幕截图看来，边距是不同的。发布一个完整的屏幕截图，或者更好的是链接到页面。我会在下面更新我的答案。我正在创建一个热图。监视用户活动，该活动在一种分辨率下录制和显示效果良好。尝试确保所有单击都是准确的。我很接近，但这里就是它的位置。我在1260x1080中单击了一个单词。我在1920x1080中单击了另一个单词。然后，我在1260x1080中显示了热图。从同一分辨率查看单击很好，但是从更高分辨率发出的咔哒声向右移动了2个单词（6个字符）。在1920x1080中查看时，以相同的分辨率查看单击是可以的，但以较低的分辨率进行的单击向左移动了大约相同的距离。使用问题的图像更新了原始帖子。是否可能在不同的屏幕大小下，页面呈现略有不同？看起来您使用的是<代码>clientWidth和

clientHeight

而不是实际的屏幕大小——所以不应该是这样。发布页面链接或至少一些屏幕截图。6个字符也可疑地接近滚动条的宽度。现在原始帖子中的屏幕截图。我还将记录的数据切换到此页面。我应该返回clientHeight吗d clientWidth？我会试试。var x=evt.clientX；var y=evt.clientY；var width=screen.width；var height=screen.height；我用clientHeight和clientWidth试过了，结果一切都不正常。screen.width和screen.height似乎最接近我。

TargetMousePosition     = CapturedMousePosition * TargetScreenSize / CapturedScreenSize
EG: [42 * 1024 / 1260, 69 * 768 / 1080] -- Be sure to round to *nearest* integer.