無法獲取未定義的屬性'hasClass'或空引用

Question

我正在使用AngularJS框架，我在jQuery中使用'hasClass'爲了讓鼠標懸停在下拉菜單上。它在Chrome和FF中工作正常，但在IE中，當我單擊按鈕並導航到另一頁時，它提供了一個錯誤，「無法獲取屬性hasClass的未定義或空引用」。 這個錯誤並不是每次都顯示出來，但它經常出現在IE中。 同樣，有時候不是'hasClass'，它會拋出'height'爲未定義或空引用。 這裏是代碼：

(function ($, window, delay) { 

     var theTimer = 0; 
     var theElement = null; 
     var theLastPosition = { x: 0, y: 0 }; 
     $('[data-toggle]') 
      .closest('li') 
      .on('mouseenter', function (inEvent) { 
       if (theElement) theElement.removeClass('open'); 
       window.clearTimeout(theTimer); 
       theElement = $(this); 

       theTimer = window.setTimeout(function() { 
        theElement.addClass('open'); 
       }, delay); 
      }) 
      .on('mousemove', function (inEvent) { 
       if (Math.abs(theLastPosition.x - inEvent.ScreenX) > 4 || 
       Math.abs(theLastPosition.y - inEvent.ScreenY) > 4) { 
        theLastPosition.x = inEvent.ScreenX; 
        theLastPosition.y = inEvent.ScreenY; 
        return; 
       } 

       if (theElement.hasClass('open')) return; 
       window.clearTimeout(theTimer); 
       theTimer = window.setTimeout(function() { 
        theElement.addClass('open'); 
       }, delay); 
      }) 
      .on('mouseleave', function (inEvent) { 
       window.clearTimeout(theTimer); 
       theElement = $(this); 
       theTimer = window.setTimeout(function() { 
        theElement.removeClass('open'); 
       }, delay); 
      }); 
    })(jQuery, window, 50); // 50 is the delay in milliseconds 

有什麼建議嗎？ 謝謝。

Answer 1

可能的問題是mousemove事件在某些情況下可能會早於mouseenter觸發。

然後，更好地檢查是否theElement仍然null在mousemove事件偵聽器：

.on('mousemove', function (inEvent) { 
    /* ... */ 
    if (!theElement || theElement.hasClass('open')) { return; } 
    window.clearTimeout(theTimer); 
    theTimer = window.setTimeout(function() { 
     theElement.addClass('open'); 
    }, delay); 
})