Как зарегистрировать клик по координате xy, который остается надежным независимо от дизайна страницы

Я создаю тепловую карту сайта. Я знаю, как получить координату xy клика, но на страницах в центрированных делениях координата xy клика зависит от ширины окна браузера пользователя.

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

Я могу использовать смещение jQuery (), чтобы получить xy на основе некоторого центрированного родительского элемента. Но я размещаю эту тепловую карту на нескольких сайтах. Итак, учитывая, что разметка каждого сайта уникальна, как мне определить, какой элемент "обертки" верхнего уровня следует использовать для вычисления смещения?

Есть какой-то более простой метод, который я пропускаю?

Источник

4 ответа

Как насчет сохранения не только x/y координаты клика, но и width/height вид-порт. Таким образом, вы можете получить позицию клика относительно порта просмотра и вычислить, где в контенте фактически произошел клик:

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = $(window).width(),
        h = $(window).height();
});

Вы можете оптимизировать это, только получая измерение порта представления, когда они изменяются:

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = windowWidth,
        h = windowHeight;
});

Обновить

Для центрированных страниц вы можете получить координату из центра порта просмотра:

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = (event.pageX - (windowWidth / 2)),
        y = event.pageY;
});

Это приведет к положительному x размеры для чего-либо на правой стороне страницы и отрицательные x размеры для чего-либо на левой стороне страницы.

Вот демо: http://jsfiddle.net/aWBFM/

Источник

Вы должны быть в состоянии определить положение мыши относительно левого верхнего угла страницы, посмотрев на event.clientX и event.clientY.

Если вы хотите, чтобы положение мыши было относительно определенного объекта, вы можете посмотреть на свойства offsetTop и offsetLeft этого объекта. (event.clientX - obj.offsetLeft) будет позицией мыши относительно объекта.

Источник

В соответствии с документацией offset() он получает координаты относительно документа, что вам и нужно. Что вам нужно сделать, это получить высоту и ширину окна. Затем, используя немного математики, рассчитайте расстояние между окном и картой.

$ (window).width () и $(window).height() получат то, что вам нужно.

Источник

Вы пытались использовать <body> элемент? Я знаю, что в HTML5 это не нужно, но я никогда не сталкивался с тем, чтобы он не использовался (и в нем задействовано нажатие).

Источник
Другие вопросы по тегам