Como posso garantir que as coordenadas de cliques salvas possam ser transferidas para o mesmo local, mesmo que o layout da página seja alterado?

Estou armazenando coordenadas de clique no meu database e, em seguida, recarregando-as mais tarde e exibindo-as no site em que ocorreu o clique. Como posso garantir que elas sejam carregadas no mesmo lugar?

Armazenar as coordenadas de clique é obviamente o passo simples, mas assim que eu as tiver, se o usuário voltar e a janela for menor ou maior, as coordenadas estarão erradas. Eu estou indo sobre isso da maneira errada, devo também armazenar uma referência de id / dom elemento ou algo dessa natureza.

Além disso, esse script será executado em muitos sites diferentes com mais de um layout. Existe uma maneira de fazer isso onde o layout é independente de como as coordenadas são armazenadas?

Sim, existem muitas maneiras de alterar o layout de uma página entre as cargas. Tamanhos de janela diferentes, tamanhos de fonte diferentes, disponibilidade de fonte diferente, navegadores / configurações diferentes (até mesmo uma pequena alteração no layout ou na preferência da fonte podem descartar o encapsulamento). É improvável que o armazenamento de coordenadas relativas a páginas seja útil, a menos que sua página seja quase toda de imagens de tamanho fixo.

Você pode tentar procurar os ancestrais do elemento clicado para encontrar o mais facilmente identificável e, em seguida, fazer um gráfico desse elemento até o elemento que você deseja com base em qual número filho ele é.

Exemplo usando uma syntax simples de 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 

Você pode vê-lo em ação usando este JSFiddle: http://jsfiddle.net/luisperezphd/L8pXL/

Eu prefiro não usar o seletor de id e apenas recursivo.

 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 

Provavelmente depende do significado do clique. Ou seja, você está preocupado com quais elementos da página em que você clicou? Se esse for o caso, eu armazenaria as coordenadas relativas ao elemento.

Então o usuário clicou no elemento X. Você precisa da localização exata no elemento X? Em seguida, armazene essa coordenada com a origem no canto superior esquerdo do próprio elemento. Dessa forma, quando o elemento se move em relação a outro conteúdo na página, a posição dentro do elemento permanece válida.

Suas coordenadas devem ser relativas ao conteúdo da página, não à janela. Use o canto superior esquerdo do seu HTML como a origem.

Você precisará fazer um cálculo para determinar isso no momento em que os dados são gravados.

Eu estava esperando que alguém tivesse uma solução muito mais shiny para esse problema, mas meus pensamentos originais devem ser a única maneira de efetivamente fazer isso.

  1. Cada website deve ter uma configuração básica descrita (por exemplo, [Layout centralizado, 960 px] ou [Layout fluido, Col 1: 25%, Col2: 60%, Col3: 15%]
  2. As coordenadas de clique devem ser gravadas em relação à canvas: x / rolar: y junto com as coordenadas da canvas.
  3. Ao retornar, as coordenadas de clique examinarão o layout armazenado, o tamanho atual da canvas e calcularão com base nisso.