Положение мыши и смещение

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

$("div#container").mousemove( function(e) {
      client_x = e.pageX;
  client_y = e.pageY;

  // save x,y

});

Теперь другой человек загружает ту же страницу, и я хочу показать им те же координаты (позиция x, x).

Как я могу получить ту же точку, если я должен принять во внимание, что контейнер div # не находится в том же положении, что и в моем браузере (учитывая разрешение экрана и прокрутку)?


javascript jquery mousemove
person Gale    schedule 27.08.2012    source источник
comment
Та же самая точка относительно #container или окна браузера?   -  person David Hellsing    schedule 27.08.2012
comment
Я думаю, что лучше относительно контейнера, потому что контейнер может двигаться влево, вправо при изменении разрешения экрана.   -  person Gale    schedule 27.08.2012

Ответы (3)


arrow_upward
0
arrow_downward

Это кажется невозможным из-за переменных, которые вы упомянули в вопросе. Разрешение экрана является основной причиной, но также зависит от размера окна. Сначала вы можете подумать, что можете вычислить положение мыши относительно фиксированных точек, как показано divs (например, возьмем переполнение стека, где основной контейнер сайта не изменяет размер вместе с окном браузера). Но если их окно меньше, чем контейнер, вы сделаете некоторые ложные предположения о том, что они видят.

При этом вы всегда можете просто вычислить положение мыши относительно фиксированных элементов, которые, как вы знаете, будут на экране, используя $.offset(), и просто предположить, что на их экране отображается все (или проверить размер $(window)) и используются «нормальные» условия просмотра.

person Charlie G    schedule 27.08.2012

arrow_upward
6
arrow_downward

Я бы использовал $.offset().top и $.offset().left родительского контейнера div и вычислил разницу между ними и текущими координатами X и Y курсора мыши.

.offset() всегда относится к документу, а не к родителю элемента.

Например:

$('#element').mousemove(function(e){
    var client_x = e.pageX;
    var client_y = e.pageY;
    var elementOffset = $(this).offset();
    client_x -= elementOffset.left;
    client_y -= elementOffset.top;

    // save x, y.
});

Затем на дисплее других пользователей покажите координаты после добавления их к его смещениям.

person Ohad    schedule 27.08.2012
comment
Хороший ответ, но было бы лучше, если бы вы предоставили более чистый код, кэшируя переменные. Так что делайте $(this) только один раз и $.offset() только один раз. (и вы можете вообще не использовать -=) - person Sjeiti; 11.03.2014
comment
Спасибо за предложение! Я ценю внимание к деталям и изменил его соответствующим образом. - person Ohad; 12.03.2014

arrow_upward
0
arrow_downward

Вы можете использовать значения, возвращаемые offset(), в вашем примере:

$("div#container").offset().left и $("div#container").offset().top

чтобы вычесть их из e.pageXи e.pageY.

offset() дает вам позицию соответствующего элемента относительно документа (см. документы), так что проблем нет если пользователи прокручивают вниз.

Пример: http://jsfiddle.net/3jMRS/

person pau.moreno    schedule 27.08.2012