即使在AngularJS中延遲鼠標輸入事件失火

Question

我們實現了一系列由MouseEnter事件觸發的懸停卡。儘管增加了超時功能，但即使觸碰一毫秒，懸停卡仍然顯示。更具體的是，如果我正在滾動過去的項目並且鼠標光標擊中了它，彈出窗口仍然會在半秒後出現。我希望能夠滾動瀏覽一個項目，而不會意外彈出。

下面是代碼：

 function onShowHoverCardHover(event) { 

      $timeout.cancel(timeoutShow); 
      $timeout.cancel(timeoutHide); 

      timeoutShow = $timeout(function() { 

       createHoverCard().then(function() { 

        $timeout(function() { 
         // alert('show timeout'); 
         var _$hc = getHoverCard(); 
         repositionHoverCard(); 
         updateAlignments(); 

         if (!isVisible) { 
          _$hc.addClass('show'); 
          isVisible = true; 
         } 
        }.bind(this), 500); 

       }.bind(this)); 

      }.bind(this), showTimeout); 

     } 

Answer 1

我相信，一旦超時觸發回調，你需要做一個檢查，看看如果鼠標仍然徘徊在卡上。

使用此功能來檢查是否正在使用jQuery徘徊的元素：Detect IF hovering over element with jQuery

$timeout(function() { 
    // alert('show timeout'); 
    var _$hc = getHoverCard(); 
    repositionHoverCard(); 
    updateAlignments(); 

    // check that the card is not visible AND is being hovered 
    if (!isVisible && _$hc.is(':hover')) { 
    _$hc.addClass('show'); 
    isVisible = true; 
    } 
}.bind(this), 500);