Ошибка: Hover меняет ссылку на HREF, Internet Explorer - PullRequest
Новая
       11

Ошибка: Hover меняет ссылку на HREF, Internet Explorer

0 голосов
/ 15 июня 2011

У меня есть ссылка, которая содержит несколько изображений.При наведении указывается интервал, добавляется класс css и повторяется по изображениям.После выхода из мыши интервал очищается.Код ниже: 

jQuery('#flicker').hover(
    function() {
       flicker = setInterval(function() {
           if (jQuery('#flicker img.active').next('img').length > 0) {
               jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
           } else {
               jQuery('#flicker img').removeClass('active');
               jQuery('#flicker img:first-child').addClass('active');
           } 
       }, 200);
     }, 
     function() {
       clearInterval(flicker);
     }
 );

По какой-то причине в Internet Explorer 6,7,8 ссылка href изменяется при наведении на строку чисел.

Для теста см. здесь .Любая помощь с благодарностью, я не видел эту ошибку раньше!

Спасибо.

(Также дайте мне знать, если вы не можете копировать, я тестирую на Mac с использованием Parallels.)

1 Ответ

3 голосов
/ 15 июня 2011

Это потому, что вы вызвали переменную, в которой вы храните интервальный таймер flicker, который также является id вашего элемента, и вы не объявили переменную и поэтому стали жертвой ужаса неявных глобалов . В IE (и некоторых других браузерах) значения id в конечном итоге становятся свойствами объекта window (значением является Element), поэтому вы заканчиваете тем, что присваиваете номер элементу, который в IE устанавливает его свойство "default", которое href.

Просто создайте приватный контекст и объявите переменную flicker: 

(function() {
    var flicker = 0;

    jQuery('#flicker').hover(
        function() {
           flicker = setInterval(function() {
               if (jQuery('#flicker img.active').next('img').length > 0) {
                   jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
                   } else {
                   jQuery('#flicker img').removeClass('active');
                   jQuery('#flicker img:first-child').addClass('active');
               } 
           }, 200);
         }, 
         function() {
           clearInterval(flicker);
         }
     ); 
})();

Не по теме : некоторые другие изменения, которые я бы порекомендовал:

  • Каждый раз, когда вы вызываете функцию jQuery, нужно проделать немалую работу, поэтому неоднократно вызывать ее для того же селектора, когда документ не изменился, довольно неэффективно. Это один из тех шаблонов, которые должны поднимать красный флаг в вашем разуме, когда вы его видите. Рекомендую обновить код наведения, чтобы сохранить и повторно использовать результат. (Имейте в виду, он отлично работает на IE7, который не совсем быстрый браузер, так что ...)
  • Рекомендовать очистить переменную flicker при очистке таймера. 0 является хорошим значением, потому что 0 не является допустимым дескриптором таймера. (Вот почему я использовал его в качестве начального значения выше.) На случай, если что-то странное случится с браузером, вызывающим ваши функции.
...