我将点击坐标存储在我的数据库中，然后稍后重新加载它们并在发生点击的站点上显示它们，我如何确保它在同一个地方加载？
存储点击坐标显然是一个简单的步骤，但是一旦我拥有它们，如果用户回来并且他们的窗口更小或更大，则坐标是错误的。我是否以错误的方式处理这个问题，我是否还应该存储元素 id/dom 引用或类似性质的内容。
此外，此脚本将在多个具有多个布局的不同网站上运行。有没有办法在布局与坐标存储方式无关的情况下做到这一点？
即使页面布局发生变化，我如何确保保存的点击坐标可以重新加载到同一位置？
IT技术
javascript
2021-01-26 23:00:15
6个回答
是的，页面布局可以通过多种方式在加载之间进行更改。不同的窗口大小、不同的字体大小、不同的字体可用性、不同的浏览器/设置（即使布局或字体偏好的微小变化也可能导致包装失效）。除非您的页面几乎完全是固定大小的图像，否则存储页面相对坐标不太可能有用。
您可以尝试查找被点击元素的祖先以找到最近的易于识别的元素，然后根据它是哪个子编号绘制从该元素到您想要的元素的图。
使用简单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];
}
您可以使用此 JSFiddle 看到它的实际效果：http : //jsfiddle.net/luisperezphd/L8pXL/
我更喜欢不使用 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++;
}
}
您的坐标应该相对于页面内容，而不是窗口。使用 HTML 的左上角作为原点。
您需要在记录数据时进行计算以确定这一点。
这可能取决于点击的含义。也就是说，您是否关心用户点击了页面的哪些元素？如果是这种情况，那么我将存储相对于元素的坐标。
所以用户点击了元素 X。你需要元素 X 中的精确位置吗？然后将该坐标与元素本身左上角的原点一起存储。这样，当元素相对于页面上的其他内容移动时，元素内的位置仍然有效。
我希望有人对这个问题有更出色的解决方案，但我最初的想法必须是有效地做到这一点的唯一方法。
- 每个网站都必须描述一个基本设置（例如 [居中布局，960 像素] 或 [流体布局，Col1：25%，Col2：60%，Col3：15%]
- 单击坐标必须与 screen:x/scroll:y 以及屏幕坐标相关联。
- 返回时，单击坐标将查看存储的布局、当前屏幕大小并基于此进行计算。
其它你可能感兴趣的问题