Javascript 如何确保保存的点击坐标可以重新加载到同一个地方，即使页面布局发生了变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2631820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I ensure saved click coordinates can be reloaed to the same place, even if the page layout changed?
提问by Tomas
I'm storing click coordinates in my db and then reloading them later and showing them on the site where the click happened, how do I make sure it loads in the same place?
我将点击坐标存储在我的数据库中，然后稍后重新加载它们并在发生点击的站点上显示它们，我如何确保它在同一个地方加载？
Storing the click coordinates is obviously the simple step, but once I have them if the user comes back and their window is smaller or larger the coordinates are wrong. Am I going about this in the wrong way, should I also store an element id/dom reference or something of that nature.
存储点击坐标显然是一个简单的步骤，但是一旦我拥有它们，如果用户回来并且他们的窗口更小或更大，则坐标是错误的。我是否以错误的方式处理这个问题，我是否还应该存储元素 id/dom 引用或类似性质的内容。
Also, this script will be run over many different websites with more than one layout. Is there a way to do this where the layout is independent of how the coordinates are stored?
此外，此脚本将在多个具有多个布局的不同网站上运行。有没有办法在布局与坐标存储方式无关的情况下做到这一点？
回答by bobince
Yeah, there are many, many ways a page's layout can alter between loads. Different window sizes, different font sizes, different font availability, different browser/settings (even a small change in layout or font preference can throw out the wrapping). Storing page-relative co-ordinates is unlikely to be that useful unless your page is almost entirely fixed-size images.
是的，页面布局可以通过多种方式在加载之间进行更改。不同的窗口大小、不同的字体大小、不同的字体可用性、不同的浏览器/设置（即使布局或字体偏好的微小变化也可能导致包装失效）。除非您的页面几乎完全是固定大小的图像，否则存储页面相对坐标不太可能有用。
You could try looking up the ancestors of the clicked element to find the nearest easily-identifiable one, then make a plot from that element down to the element you want based on which child number it is.
您可以尝试查找被点击元素的祖先以找到最近的易于识别的元素，然后根据它是哪个子编号绘制从该元素到您想要的元素的图。
Example using simple XPathsyntax:
使用简单XPath语法的示例：
document.onclick= function(event) {
if (event===undefined) event= window.event; // IE hack
var target= 'target' in event? event.target : event.srcElement; // another IE hack
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];
var path= getPathTo(target);
var txy= getPageXY(target);
alert('Clicked element '+path+' offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1]));
}
function getPathTo(element) {
if (element.id!=='')
return 'id("'+element.id+'")';
if (element===document.body)
return element.tagName;
var ix= 0;
var siblings= element.parentNode.childNodes;
for (var i= 0; i<siblings.length; i++) {
var sibling= siblings[i];
if (sibling===element)
return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
if (sibling.nodeType===1 && sibling.tagName===element.tagName)
ix++;
}
}
function getPageXY(element) {
var x= 0, y= 0;
while (element) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x, y];
}
You can see it in action using this JSFiddle: http://jsfiddle.net/luisperezphd/L8pXL/
你可以使用这个 JSFiddle 看到它的实际效果：http: //jsfiddle.net/luisperezphd/L8pXL/
回答by Scott Izu
I prefer not using the id selector and just going recursive.
我更喜欢不使用 id 选择器而只是递归。
function getPathTo(element) {
if (element.tagName == 'HTML')
return '/HTML[1]';
if (element===document.body)
return '/HTML[1]/BODY[1]';
var ix= 0;
var siblings= element.parentNode.childNodes;
for (var i= 0; i<siblings.length; i++) {
var sibling= siblings[i];
if (sibling===element)
return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
if (sibling.nodeType===1 && sibling.tagName===element.tagName)
ix++;
}
}
回答by Vincent Ramdhanie
It probably depands on the meaning of the click. That is, are you concerned about which elements of the page that you user clicked on? If that is the case then I would store the coordinates relative to the element.
这可能取决于点击的含义。也就是说，您是否关心用户点击了页面的哪些元素？如果是这种情况，那么我将存储相对于元素的坐标。
So the user clicked on element X. Do you need the precise location in element X? Then store that coordinate with the origin at top left of the element itself. This way, when the element moves relative to other content on the page then the position within the element remains valid.
所以用户点击了元素 X。你需要元素 X 中的精确位置吗？然后将该坐标与元素本身左上角的原点一起存储。这样，当元素相对于页面上的其他内容移动时，元素内的位置仍然有效。
回答by Diodeus - James MacFarlane
Your coordinates should be relative to the page contents, not the window. Use the upper-left of your HTML as the origin.
您的坐标应该相对于页面内容，而不是窗口。使用 HTML 的左上角作为原点。
You will need to do a calculation to determine this at the time the data is recorded.
您需要在记录数据时进行计算以确定这一点。
回答by Tomas
I was hoping that someone had a much more brilliant solution to this problem, but my original thoughts must be the only way to effectively do this.
我希望有人对这个问题有更出色的解决方案，但我最初的想法必须是有效地做到这一点的唯一方法。
- Each website must have a base setup described (e.g. [Centered layout, 960px] or [Fluid layout, Col1: 25%, Col2: 60%, Col3: 15%]
- Click coordiantes must be recorded in relation to the screen:x/scroll:y along with screen coordinates.
- On return the click coords will look at the stored layout, current screen size and calculate based on that.
- 每个网站都必须描述一个基本设置（例如[居中布局，960px] 或 [流体布局，Col1：25%，Col2：60%，Col3：15%]
- 单击坐标必须与 screen:x/scroll:y 以及屏幕坐标相关联。
- 返回时，点击坐标将查看存储的布局、当前屏幕大小并基于此进行计算。
