javascript - 如何确保保存的点击坐标可以重新加载到同一个地方，即使页面布局发生变化？

Question

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

存储点击坐标显然是简单的步骤，但是一旦我有了它们，如果用户回来并且他们的窗口变小或变大，则坐标是错误的。我是否以错误的方式解决这个问题，我是否还应该存储元素 id/dom 引用或类似性质的东西。

此外，此脚本将在具有不止一种布局的许多不同网站上运行。有没有办法在布局独立于坐标存储方式的情况下执行此操作？

Answer 1

是的，页面布局可以通过多种方式在加载之间进行更改。不同的窗口大小、不同的字体大小、不同的字体可用性、不同的浏览器/设置(即使是布局或字体首选项的微小变化也可能导致换行)。除非您的页面几乎完全是固定大小的图像，否则存储页面相对坐标不太可能有用。

您可以尝试查找被单击元素的祖先以找到最近的易于识别的元素，然后根据它的子编号从该元素向下绘制到您想要的元素。

使用简单 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/