Javascript 如何确保保存的单击坐标可以重新加载到同一位置，即使页面布局发生更改？

我将单击坐标存储在数据库中，然后稍后重新加载，并在单击发生的站点上显示它们，如何确保它加载在同一位置

存储点击坐标显然是一个简单的步骤，但一旦我有了它们，如果用户回来，他们的窗口变小或变大，坐标就错了。我是否以错误的方式进行了此操作，是否还应该存储元素id/dom引用或类似的内容

---

此外，此脚本将在多个不同的网站上运行，并具有多个布局。如果布局与坐标的存储方式无关，是否有办法做到这一点？

您的坐标应该与页面内容相关，而不是与窗口相关。使用HTML的左上角作为原点

---

您需要在记录数据时进行计算以确定这一点。

这可能与单击的含义有关。也就是说，您是否关心用户单击的页面的哪些元素？如果是这种情况，那么我将存储相对于元素的坐标

---

因此，用户单击了元素X。您需要元素X中的精确位置吗？然后将与原点的坐标存储在元素本身的左上角。这样，当元素相对于页面上的其他内容移动时，元素内的位置仍然有效。

是的，页面的布局可以通过多种方式在加载之间改变。不同的窗口大小、不同的字体大小、不同的字体可用性、不同的浏览器/设置（即使在布局或字体首选项上做一点小的更改，也可能会使包装失效）。除非您的页面几乎完全是固定大小的图像，否则存储页面相对坐标不太可能有用

您可以尝试查找单击元素的祖先，以找到最近的易于识别的元素，然后根据该元素的子编号绘制从该元素到所需元素的绘图

使用简单语法的示例：

document.onclick=函数（事件）{
如果（event==未定义）event=window.event；//IE hack
var target='target'在event？event.target:event.srcmelement；//另一个IE黑客
var root=document.compatMode=='CSS1Compat'？document.documentElement:document.body；
var mxy=[event.clientX+root.scrollLeft，event.clientY+root.scrollTop]；
var path=getPathTo（目标）；
var txy=getPageXY（目标）；
警报（'Clicked element'+path+'offset'+（mxy[0]-txy[0]）+'，'+（mxy[1]-txy[1]）；
}
函数getPathTo（元素）{
if（element.id！=''）
返回'id（'+element.id+'）；
if（元素===document.body）
返回元素.tagName；
var ix=0；
var sides=element.parentNode.childNodes；
对于（var i=0；i我希望有人能对这个问题有一个更出色的解决方案，但我最初的想法必须是有效解决这个问题的唯一方法

每个网站必须有一个描述的基本设置（例如[中心布局，960px]或[流体布局，Col1:25%，Col2:60%，Col3:15%]
必须记录与屏幕：x/滚动：y相关的单击坐标以及屏幕坐标
返回时，单击coords将查看存储的布局、当前屏幕大小并基于此进行计算
我不喜欢使用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++;
    }
}

函数getPathTo（元素）{
如果（element.tagName=='HTML'）
返回“/HTML[1]”；
if（元素===document.body）
返回'/HTML[1]/BODY[1]'；
var ix=0；
var sides=element.parentNode.childNodes；
对于（var i=0；i我正在做类似的事情，我需要记录元素在页面上的拖放位置。我可以将拖放位置的一些数据存储在数据库中，以便将其拉出并将元素放回拖放位置。唯一的要求是我希望被拖放的元素尽可能靠近元素在所有的屏幕尺寸上，它都会掉在上面

由于现代网络的响应特性，元素可以根据屏幕大小移动到完全不同的位置

我的解决方案是忽略所有DOM选择器，而只是记录元素在DOM树中的位置，方法是在DOM的每个“层”上记录一个子索引，一直记录到所讨论的元素

为此，我从
event.target
元素向上遍历DOM树，查看
currentNode.parentNode.children
以查找my
currentNode
驻留的子索引。我将其记录在一个数组中，然后我可以使用该数组将所有子索引返回DOM树以查找我的元素。我还保存删除的元素如果dropzone元素改变了像素大小，则以百分比表示ts偏移

以下是我的简化代码：

    var rect = mouseEvent.target.getBoundingClientRect()
    // get position of mouseEvent in target as a percentage so we can be ok if it changes size
    var xpos = Math.floor(mouseEvent.offsetX / rect.width * 100)
    var ypos = Math.floor(mouseEvent.offsetY / rect.height * 100)
    
    // traverse backwards up the dom tree, recording this 'branch' of it as we go:
    var curEl = mouseEvent.target
    var tree = []
    while(curEl.parentNode){
        for( var i = 0; i < curEl.parentNode.children.length; i ++ ){
            var curChild = curEl.parentNode.children[i]
            if( curChild === curEl ){ // i is our child index
                tree.unshift(i) // unshift to push to the front of the array
                break
            }
        }
        curEl = curEl.parentNode
    }
    

var rect=mouseEvent.target.getBoundingClientRect（）
//获取mouseEvent在目标中的位置（以百分比表示），以便在它改变大小时我们可以确定
var xpos=数学地板（mouseEvent.offsetX/rect.width*100）
var ypos=数学地板（mouseEvent.offsetY/rect.height*100）
//向后遍历dom树，在执行时记录其“分支”：
var curEl=mouseEvent.target
变量树=[]
while（curEl.parentNode）{
for（var i=0；i

然后，为了再次找到我的节点，我只需遍历dom：

    var curEl = document
    for(var i = 0; i < tree.length; i ++){
        curEl = curEl.children[tree[i]]
    }

var curEl=文档
对于（var i=0；i

我保存到数据库的所有内容
    var curEl = document
    for(var i = 0; i < tree.length; i ++){
        curEl = curEl.children[tree[i]]
    }