Как сделать так, чтобы сохраненные координаты кликов можно было переместить в одно и то же место, даже если изменился макет страницы?

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/

Answer 2

Я предпочитаю не использовать селектор идентификатора, а просто использовать рекурсив.

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++;
    }
}

Answer 3

Вероятно, это зависит от значения щелчка. То есть вас беспокоит, на какие элементы страницы вы кликали? Если это так, то я бы сохранил координаты относительно элемента.

Итак, пользователь нажал на элемент X. Вам нужно точное местоположение в элементе X? Затем сохраните эту координату с началом координат вверху слева от самого элемента. Таким образом, когда элемент перемещается относительно другого содержимого на странице, позиция в элементе остается действительной.

Answer 4

Я надеялся, что у кого-то есть гораздо более блестящее решение этой проблемы, но мои оригинальные мысли должны быть единственным способом эффективно сделать это.

1. Каждый веб-сайт должен иметь описанную базовую настройку (например, [Центрированный макет, 960px] или [Макет флюида, Col1: 25%, Col2: 60%, Col3: 15%]
2. Координаты кликов должны быть записаны относительно экрана: x / scroll: y вместе с координатами экрана.
3. По возвращении координаты клика будут смотреть на сохраненный макет, текущий размер экрана и рассчитывать на основании этого.

Answer 5

Ваши координаты должны быть относительно содержимого страницы, а не окна. Используйте верхний левый угол вашего HTML в качестве источника.

Вам потребуется выполнить расчет, чтобы определить это во время записи данных.