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

我有一些简单的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位置以显示每个人都在同一空间点击，无论分辨率是多少？

如果这属于一个更好的部分，请让我知道为好。

:::编辑:::应用Brock的建议后，我附上两张截图，我点击了在每个段落的开头部分以不同的分辨率表示“If”字样。当以这两种分辨率观看时，以相同分辨率发生的点击直接在该词上，当分辨率更高或更低时，它们分别向右或向左移动。

http://img291.imageshack.us/img291/5682/1260x1080.png http://img27.imageshack.us/img27/8950/1920x1080c.png

来源

2010-06-12 Nathan

我不知道你的要求，但如果这对你是可能的，考虑记录DOM元素的路径被点击而不是鼠标的位置。 – 2010-06-12 21:22:35

从这些截图中，它看起来像边距是不同的。张贴整个屏幕截图或 - 更好地 - 链接到页面。我会在下面更新我的答案。 – 2010-06-12 23:12:37

更新：
其他要考虑的问题，这个问题可能不是完全可解...

在不同的屏幕尺寸，诸如此类的利润率（为中心的内容）会有所不同。需要调整到“屏幕尺寸”真正成为clientWidth后补偿利润率的变化。
另外，尽管如此，在不同的屏幕分辨率（加上用户浏览器窗口的大小）下，页面可能呈现不同的效果。如果这会导致换行方式不同，它会真正抛弃比较。

原来的答案：

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

这应该是简单的缩放问题

伪代码：
考虑：

CapturedMousePosition = {X and Y coordinates of logged machine, in pixels} //-- EG [42, 69] 
CapturedScreenSize  = {width and height of logged machine, in pixels}  //-- EG [1260, 1080] 
TargetScreenSize  = {width and height of display machine, in pixels}  //-- EG [1024, 768] 
/*-- Note that client size and/or view-port size, are what we mean by "screen size" here. 
    This is because the browser will use some unknown fraction of the PC's display resolution. 
*/

然后：

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

来源

2010-06-12 21:45:37

我很近，但这里是它的立场。我点击了1260x1080中的一个单词。我点击1920x1080的另一个字。然后我显示1260x1080的热图。查看来自同一分辨率的点击数很好，但是来自较高分辨率的点击数向右移动了2个字（6个字符）。以1920x1080查看时，查看以相同分辨率拍摄的点击数是正确的，但以较低分辨率拍摄的点击数左移大约相同的距离。 – Nathan 2010-06-12 22:51:23

更新了有问题图片的原始帖子。 – Nathan 2010-06-12 23:02:41

页面在不同的屏幕尺寸下呈现的方式可能略有不同吗？它看起来像你正在使用'clientWidth'和'clientHeight'而不是实际的屏幕大小 - 所以不应该是这样。发布一个链接到页面或至少一些屏幕截图。 6个字符也可疑地接近滚动条的宽度。 – 2010-06-12 23:07:58

如果你需要的地方存放在用户点击该文件中，你现在正在做的应该没问题。

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

来源

2010-06-12 21:24:47

我正在创建一个热图来监视用户活动，它可以在一个分辨率下正常记录和显示。试图确保所有的点击都是准确的。 – Nathan 2010-06-12 22:35:32

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

回答

相关问题