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

【问题标题】：ng-mouseover and ng-mouseleave events not working on chromeng-mouseover 和 ng-mouseleave 事件在 chrome 上不起作用
【发布时间】：2014-12-29 10:21:04
【问题描述】：

我在我的 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 时，dataBoxInfoContent div 会打开，因为高度从 0 变为 50px，而当触发 ng-mouseleave 时，div 会再次关闭。

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

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

【问题讨论】：

这类问题很难隔离。你能 100% 确定鼠标离开没有触发吗？你是基于风格没有改变的事实吗？您是否考虑过将infoIconStyle 设置为一组预定义的类而不是内联样式？ Chrome 可能会对此做出更好的反应。建立几个符合这些风格的类，然后在鼠标悬停离开时执行infoIconStyle = "classname"之类的操作。
很确定这是 CSS 问题，而不是 Angular。如果你可以做一个演示..否则无法猜测，因为ngMouseleave当然可以在Chrome中正常工作。
我尝试传递类名而不是内联 css，但仍然遇到相同的问题，但仅在 Chrome 中。在 Firefox 和 IE 中一切正常
jsfiddle.net/bpd27p1v/2 - 嗯似乎在 Chrome 中工作 - 检查你的代码是否有错别字。
这在之前也对我有用，但我想我一定是在我的 css 中改变了一些东西来破坏 Chrome 中的这个功能。

标签： angularjs events

【解决方案1】：

我在使用 Chrome 时遇到了类似的问题，并最终将问题归结为特定的 Chrome 扩展程序（对我来说，它是 AngularJS Batarang 扩展程序）。

如果您有任何 javascript 分析扩展，它们添加到您的页面的缓慢有时会导致事件（尤其是鼠标移动事件）出现异常行为。

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

【讨论】：

谢谢。如果再次发生这种情况，请查看我的 JavaScript CPU 配置文件。它发生过一两次，当我重新启动我的电脑时得到整理......
谢谢。第三次 AngularJS Batarang 搞砸了我。
FWIW，Batarang needs some love.
这解开了我的谜团！（你知道，那种，我发誓我没有改变任何东西，为什么这停止工作？）我只是取消选中 Batarang 中的“启用复选框”，一切都像以前一样工作:-)
到目前为止，我猜黄金法则是无故失败，检查 Batarang 是否已禁用，然后再次测试您的 Angular 应用程序