即使在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);