Ошибки jQuery mouseleave с анимированными элементами - PullRequest
Новая
       18

Ошибки jQuery mouseleave с анимированными элементами

3 голосов
/ 12 февраля 2010

Я столкнулся со странной проблемой.

jQuery 1.4.1 События mouseenter / mouseleave запускаются корректно, если мышь перемещается, это не имеет большого значения. Тем не менее, в некоторых браузерах возникают ошибки, когда сам курсор остается статичным, но элемент перемещается с помощью animate ().

Итак, представьте код, подобный этому: 

jQuery('somelement').bind(
{
   mouseenter: function(e) {
     log.debug("enter");
     $(this).animate({left: 9999}, 2000);
   },
   mouseleave: function() {
     log.debug("leave");
   }
});

Если вы быстро наведете указатель мыши на элемент, а затем остановите его, вы получите разные результаты в зависимости от браузера.

FF3.6, Safari 4, IE7: отпуск мышью срабатывает, как и ожидалось, когда курсор покинул анимированный элемент, даже если сама мышь остановилась.

IE6, IE8, Opera 9/10, Safari 3, Chrome: mouseleave НЕ срабатывает, даже если элемент находится за пределами окна. Требуется небольшое движение мыши, чтобы вызвать правильное событие отпускания мыши.

Есть идеи как это исправить?

1 Ответ

0 голосов
/ 12 апреля 2011

К сожалению, похоже, что функции mouseover, mouseleave, mouseover и mouseout связаны с мышью, а не с реальным объектом. Это также верно при использовании встроенной альтернативы: onmouseout и т. Д.

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

  1. Создайте обработчик мыши для вашего элемента. Когда мышь входит в элемент, свяжите mouseout и mousemove.
  2. Когда вызывается событие mousemove, используйте этот объект события для хранения позиций мыши x и y в глобальных переменных.
  3. Используйте пользовательскую функцию анимации, которая перемещает элемент с циклом while. Внутри этого цикла while проверьте, переместился ли элемент из координат x и y, сохраненных на шаге 2.
  4. Если этот элемент переместился за пределы этих координат x и y, сделайте все, что вам нужно, а также отсоедините перемещение мыши (в противном случае он будет поглощать ненужные ресурсы). Это также должна быть функция, которая запускается, если вызывается указатель мыши из шага 1.

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

...