CODEWITHSUNDEEP
javascriptjqueryangularjs
bnussey
bnussey

Reputation: 1964

MouseEnter event misfiring even with a delay in AngularJS

We've implemented a series of hover cards that are triggered by a MouseEnter event. Despite adding timeouts to these, the hover card still shows even when just touching for a millisecond. More specifically is that if I was scrolling past the item and the mouse cursor hit it, the popup would still occur half a second later. I want to be able to scroll past an item without the popup happening by accident.

Here is the code:

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

        }

Upvotes: 0

Views: 297

Answers (1)

Philippe Schwyter
Philippe Schwyter

Reputation: 303

I believe that once timeout callback is triggered, you need to make a check to see if the mouse is still hovering over the card.

Use this to check if the element is being hovered using 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);

Upvotes: 1

Related Questions