Замена onmousemove?

Question

[Александр]

Тут пишут

При быстром движении мыши события mouseover, mousemove, mouseout могут пропускать промежуточные элементы.

Я делаю лупу на картинку, проблема в том что блок движется неправильно и постоянно скачет в нижний левый угол (когда убираю движение изображения скачет в 0:0)
Есть аналог в чистом js, который будет постоянно контролировать положение мыши даже при быстром движении? Или я что-то делаю не так?



На кривое приближение внимания не обращайте, это поправлю. Там беда со "скачками"

Answer 1

[0xD34F]

Добавляем pointer-events: none; элементу .bigImage - всё окей, никаких скачков.

Answer 2

[Владимир Проскурин]

Вот так правильно https://jsfiddle.net/ns8f954h/6/

Comments

[Александр]

Как исправить это ограничение?

[Александр]

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

[Владимир Проскурин]

Александр, я понял о чем вы. Координаты через раз берутся относительно лупы. Поэтому либо как выше советовали pointer-events: none, либо getBoundingClientRect вот https://jsfiddle.net/ns8f954h/6/

[Александр]

Владимир Проскурин, Да, я заметил, поставил pointer-events.

Answer 3

[Aleksey Solovyev]

Читайте внимательно доки. Как

При быстром движении мыши события mouseover, mousemove, mouseout могут пропускать промежуточные элементы.

связано с Вашей задачей и кодом? Вот вам пример "лупы" link. Есть какие-то "скачки"? Код по ссылке предоставлен - исправляйте свой.

Если не нравится onmousemove, то можно использовать requestAnimationFrame().
По onmouserenter запускайте raf, который будет на каждом шаге проверять положение мыши. По onmouseleave отменяйте raf(cancelAnimationFrame())