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

MouseEnter event misfiring even with a delay in AngularJS

本文关键字：AngularJS 延迟 事件 失火 MouseEnter      更新时间：2023-09-26

我们已经实现了一系列由 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);
        }
我相信

一旦触发超时回调，您需要检查鼠标是否仍然悬停在卡上。

使用它来检查元素是否正在使用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);
相关文章：