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

Я сохраняю координаты кликов в своем db, а затем перезагружаю их позже и показывая их на сайте, где произошел щелчок, как я могу убедиться, что он загружается в одном месте?

Хранение кликов – это, очевидно, простой шаг, но как только я их получу, если пользователь вернется и их окно будет меньше или больше, координаты ошибочны. Я собираюсь сделать это не так, должен ли я хранить элемент id / dom reference или что-то в этом роде.

Кроме того, этот скрипт будет работать на многих разных сайтах с несколькими макетами. Есть ли способ сделать это, когда макет не зависит от того, как хранятся координаты?

Да, существует много способов, которыми макет страницы может изменяться между нагрузками. Различные размеры окон, разные размеры шрифтов, различная доступность шрифтов, разные настройки браузера / настройки (даже небольшое изменение в макете или предпочтении шрифта может выкинуть упаковку). Сохранение относительных координат страниц вряд ли будет полезным, если только ваша страница не является почти полностью фиксированными изображениями.

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

Пример использования простого синтаксиса 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 

Вы можете увидеть это в действии, используя этот 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 

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

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

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

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

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

  1. На каждом веб-сайте должна быть описана базовая установка (например, [Центрированный макет, 960 пикселей] или [Масштаб флюида, Col1: 25%, Col2: 60%, Col3: 15%]
  2. Координаты кликов должны записываться относительно экрана: x / scroll: y вместе с координатами экрана.
  3. При возврате координаты кликов будут смотреть на сохраненный макет, текущий размер экрана и рассчитывать на основе этого.
  • Как получить доступ к первому свойству объекта в Javascript?
  • Как проверить, не является ли переменная переменной?
  • XMLHttpRequest не может загрузить XXX Нет заголовка «Access-Control-Allow-Origin»
  • Почему использование $ rootScope с функциями не рекомендуется?
  • Есть ли способ отключить конкретный JS-скрипт с определенного веб-сайта?
  • Что такое «new.target»?
  • Неправильное отображение свойств объекта отчета Javascript Console
  • Как добавить событие click к элементу?
  • Как создать новый div динамически, изменить его, перенести, изменить его всеми возможными способами в JavaScript?
  • Восстановите поведение браузера в среднем клике
  • Как автоматически перезагрузить файлы в Node.js?
  • Interesting Posts

    Как разрешить запуск скриптов VB на учетной записи администратора

    XML Сериализовать общий список сериализуемых объектов

    Измените каталог cd на cdd другого терминала

    Плагин для Notepad ++ 5.8.6 для отображения закладок текущего файла

    Как я могу восстановить свой ноутбук из неудавшегося обновления BIOS?

    Как получить заголовок с карточек или похожих предметов с одинаковой высотой с помощью гибкой коробки?

    Загрузка изображения iOS через AFNetworking 2.0

    Преобразование из BitArray в байт

    Получение текста после соответствия регулярному выражению

    String Ресурс новой строки / n невозможен?

    Как преобразовать массив байтов в строку и наоборот?

    Как можно хранить данные в CMOS?

    Приложение распознавания речи Android без всплывающих окон

    Нет кэшированной версии com.android.tools.build:gradle:0.9.1 для автономного режима

    Остановить запланированный таймер при выключении tomcat

    Давайте будем гением компьютера.