javascript - 不再悬停时取消悬停 Action ？

Question

我有这样一种情况，当用户将鼠标悬停在一个按钮上时，它应该在稍微延迟后显示一个小弹出窗口。

tt = angular.element(element);
  ...
  showTooltipFn = function() {
    setTimeout(function() {
      tt.tooltip("show");
    }, 700);
  };  

但是，当您说将鼠标快速悬停在其他按钮上时，它会显示您悬停的所有按钮。我只想在当前悬停的按钮上显示弹出窗口。如果我不再徘徊取消节目。

有没有办法用 AngularJS 做到这一点？检查我是否还在悬停什么？

Answer 1

ngMouseLeave允许您在鼠标离开时计算表达式。

AngularJS 文档中的示例

<button ng-mouseleave="count = count + 1" ng-init="count=0">
  Increment (when mouse leaves)
</button>
count: {{count}}

对于你的情况......

        var timeoutPromise;
        showTooltipFn = function() {
          timeoutPromise = $timeout(function() {
            tt.tooltip("show");
          }, commonOptions.delay.show);
          tt.on("mouseleave", function() {
            $timeout.cancel(timeoutPromise);
          });
        };
      }