Question

我有一些简单的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的建议后，我附上了两个截图。我在不同分辨率的每个段落的开头点击了“如果”这个词。在这两种分辨率下查看时，同一分辨率中发生的点击直接出现在单词上，当分辨率更高或更低时，它会分别向右或向左移动。

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

Answer 1

如果您需要将该地点存储在用户点击的文档中，那么您现在正在做的事情应该没问题。

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

Answer 2

<强>更新
要考虑的其他问题，问题可能无法完全解决......

在不同的屏幕尺寸下，边距（中心内容）等内容会有所不同。

“屏幕尺寸”

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.

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

2 个答案: