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);

即使在AngularJS中有延迟，MouseEnter事件也会失效

1 个答案: