jquery mouseOver/mouseEnter发生时不应该

Question

我正在处理一个导航插件，该插件需要一个列表并将每个项目放在它的div上，这会像按钮一样工作。它类似于标准的下拉菜单。

我的问题来自函数setFocus（）。这将采用选定的div并添加悬停/ mouseOver/mouseEnter功能。

我列出了三个，因为我已经尝试了所有三个都与他们同样的问题。如果您在该功能中注意到，我现在将它设置为在鼠标进入div时使用文本'over'进行提醒。

由于某些原因，无论游标是否输入了div，它都会运行。加载页面时，即使光标不在窗口空间内，即使您在div上滚动，警报也会触发，就好像光标已进入div并且mouseLeave从不响应。有没有其他人有类似的问题？我很难过。

http://jsfiddle.net/cFEdb/5/

var divCode = String(); 


//grab each list item and put it in its own div 

$('#nav li').each(function() { 
    divCode += "<div>" + $(this).html() + "</div> "; 
}); 


//get rid of the list and replace it with a plane ol' div 
//then fill that it with our new "button" divs 

$('#nav').replaceWith('<div id="newNav"> </div)'); 
$('#newNav').html(divCode); 


//add some functionality to the divs 

$('#newNav div').addClass('fader') 
       .each(function() { 

      if ($(this).css('position')!='relative' || $(this).css('position')!='absolute'){ 
       $(this).css('position','relative'); 
      }  
     }) 
     .css('cursor', 'pointer') 
     .click(function() {       
      switchDivs($(this)); 
     }); 


//set the min-height of the nav div 
$('#newNav').css('minHeight', $('#newNav').height()); 

setFocus($('#newNav div').first()); 

$('.fader').hide(); 

function fadeOn(speed) { 

    $('.fader').fadeTo(speed, 100); 
    alert('over'); 
} 

function fadeWipe(speed) { 

    $('.fader').fadeTo(speed, 0); 
    alert('out'); 
} 

function setFocus(obj) { 

    obj.removeClass('fader') 
     .addClass('focus') 
     .css('backgroundColor', 'red') 
     .hover(fadeOn(500),fadeWipe(500)); 
} 

function switchDivs(obj2) { //obj2 is the object to become the focus div 

    var obj1 = $('.focus'); 

    //if the two objects are the same, quit 
    if (obj1.text() == obj2.text()) { 
     return; 
    } 

    var oneOff = obj1.offset(); 
    var oneDirectionY = "-"; //lol...one direction 

    var twoOff = obj2.offset(); 
    var twoDirectionY = "-"; 

    var movementTotalY = 0; 

    if (oneOff.top <= twoOff.top) { 
     oneDirectionY = "+"; 
     movementTotalY = twoOff.top - oneOff.top; 
    } else { 
     twoDirectionY = "+"; 
     movementTotalY = oneOff.top - twoOff.top; 
    } 

    var oneDirectionX = "-"; //lol...one direction 
    var twoDirectionX = "-"; 

    var movementTotalX = 0; 

    if (oneOff.left <= twoOff.left) { 
     oneDirectionX = "+"; 
     movementTotalX = twoOff.left - oneOff.left; 
    } else { 
     twoDirectionX = "+"; 
     movementTotalX = oneOff.left - twoOff.left; 
    } 

    obj1.animate({ top : oneDirectionY+"="+movementTotalY+"px", 
       left : oneDirectionX+"="+movementTotalX+"px" 
      },1500); 

    obj2.animate({ top : twoDirectionY+"="+movementTotalY+"px", 
       left : twoDirectionX+"="+movementTotalX+"px" 
      },1500); 

    //remove focus from object 1 
    obj1.removeClass('focus') 
       .addClass('fader'); 


    //add focus to object 2 
    obj2.removeClass('fader') 
       .addClass('focus'); 

} 

}）;

Answer 1

setFocus($('#newNav div').first()); 

当JavaScript是被立即解析即这条线将被执行。 鼠标输入/离开代码也会这样做，但在调用setFocus（）时会有警告 - 您的倒数第二行。上述更正的问题后

答：

你已经习惯了呼叫的fadeOn /擦拭功能的jQuery.hover（）函数执行这些代替他们连接到悬停事件。

悬停回调应该是一个closure内，以避免被执行时流量达到这一点：

function setFocus(obj) { 
     obj.removeClass('fader') 
     .addClass('focus') 
     .css('backgroundColor', 'red') 
     .end() 
     .hover(function() { 
       fadeOn(500); 
       }, 
       function() { 
       fadeWipe(500); 
       }); 
    } ​ 

注：我已在jQuery.css（）调用后添加一个jQuery.end()因为.css()回报串。您需要将悬停事件绑定到jQuery对象而不是字符串。查找其他您称为.css（）的事件并检查。

警报也应在一个闭合调用，以使得之后的元素已经完成了它们的衰落动画当那些fadeOn /擦除功能被调用，而不是它们被执行。

function fadeOn(speed) { 
     $('.fader').fadeTo(speed, 100, function() { 
      alert('over'); 
     }); 
    }​