jQuery: как получить положение мыши относительно верхнего / левого угла элемента с учетом полос прокрутки - PullRequest
0 голосов
/ 22 сентября 2011

Я делаю некоторую работу с элементом canvas и мне нужно отследить указатель мыши вокруг его частей.

Я бы хотел получить возможность получить положение относительно элементов вверху слева, 0, 0У меня есть это - с помощью jQuery:

...
var pos = $(this).position();
var left = e.clientX - position.left;
var top = e.clientY - position.top;    
... 

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

TIA.

Ответы [ 2 ]

1 голос
/ 22 сентября 2011

Вы должны, в зависимости от браузера, использовать offsetX / offsetY или layerX / layerY атрибутов объекта события , чтобы отслеживать мышь относительно элемента, который выпривязал событие mousemove к.

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

(function($){
    var org = $.event,
        _super = {
            fix:  org.fix
        };
    $.extend($.event, {
        fix: function(event) {
            var self = _super.fix.apply(this, [event]);
            // Normalize offsetY/X and layerX/Y
            self.mouseX = (self.offsetX || self.layerX);
            self.mouseY = (self.offsetY || self.layerY);
            return self;
        }
    });
})(jQuery);

См. тестовый пример на jsFiddle

0 голосов
/ 23 сентября 2011

удалось это исправить, по моде:

   var left = 0;
   var top = 0;
   if(e.offsetX) {
    left = e.offsetX;
    top = e.offsetY;
   } else {
    var offset = $(element).offset();
    left = e.layerX - offset.left;
    top = e.layerY - offset.top;
   }

Мозу необходимо учитывать смещение. Хотя я уверен, что должен быть «правильный» jquery api, который скрывает эту деталь от меня.

Также с jsfiddle происходит нечто «забавное», что приведенный выше пример работает нормально - в браузере этого не произошло.

Конечно, я могу просто говорить глупости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...