错误：悬停正在更改链接 href、Internet Explorer

Question

我有一个包含多张图片的链接。悬停时会设置一个间隔并添加 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 会在悬停时更改为一串数字。

有关测试用例，请参阅here。非常感谢任何帮助，我以前从未见过这个错误！

谢谢。

（如果您无法复制，请告诉我，我正在使用 Parallels 在 Mac 上进行测试。）

Answer 1

这是因为您调用了存储间隔计时器的变量flicker，这也是您的元素的id，而您还没有声明该变量，因此您成为Horror of Implicit Globals 的牺牲品。在 IE（和其他一些浏览器）上，id 值最终成为 window 对象的属性（值是 Element），因此您最终为元素分配了一个数字，在 IE 上设置了它的“默认”属性，即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 不是有效的计时器句柄。 （这就是我在上面使用它作为初始值的原因。）以防万一浏览器调用您的函数时发生一些奇怪的事情。