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'); 
     }); 
    }​