angularjs - ng-mouseover 和 ng-mouseleave 事件在 chrome 上不起作用

Question

我在我的 Angular 应用程序中设置了以下内容

我有一个图像，其中的以下 ng-mouseover 和 ng-mouseleave 事件与图像标签相关联

<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}"  ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />

这些鼠标悬停事件随后被发送到以下 div

<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>

因此，当触发 ng-mouseover 时，由于高度从 0 到 50px，dataBoxInfoContent div 会打开，而当触发 ng-mouseleave 时，div 会再次关闭。

然而，由于某种原因，当鼠标离开图像时，ng-mouseleave 不会被触发，这仅在 Google Chrome 中出现。在 Internet Explorer 和 Mozilla Firefox 中一切正常。

有谁知道为什么会这样吗？

Answer 1

我在 Chrome 上遇到了类似的问题，最终将该问题追溯到特定的 Chrome 扩展程序(对我来说，它是 AngularJS Batarang 扩展程序)。

如果您有任何 javascript 分析扩展，这些扩展添加到您的页面中的速度有时会导致事件(特别是鼠标移动事件)出现异常行为。

在 Chrome 调试器的“配置文件”选项卡中，使用“收集 JavaScript CPU 配置文件”来找出哪些脚本(如果有)是 hogs，然后如果您将鼠标悬停在右侧的脚本上，它会告诉您hog 属于哪个 chrome 扩展。