[AngularJS]MouseEnter 事件甚至带有 AngularJS 延迟缺火

发布时间: 2017/4/16 18:28:27
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我们已经实施了一系列的由 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);

        }

解决方法 1:

我相信,一旦触发超时回调,你需要做一个检查,检查是否鼠标仍笼罩着卡。

用于检查是否该元素使用 jQuery 正在徘徊︰检测如果悬停在 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);
官方微信
官方QQ群
31647020