ng-mouseover和ng-mouseleave事件不能在chrome上工作 [英] ng-mouseover and ng-mouseleave events not working on chrome

问题描述

我已经在我的角度应用程序中设置了以下内容

我有一个图像，其中包含以下ng-mouseover和ng-mouseleave事件绑定到图像标签

 < imgng-mouseover =infoIconStyle = {'height'：'50px'，'padding'：'10px'} ng-mouseleave =infoIconStyle = {'height'：'0'，'padding'：'0'}src =images / info-icon.svg/> 
  

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

 < div class =dataBoxInfoContentng-style =infoIconStyle> {{description}}< / div>因此，当ng-mouseover被触发时，dataBoxInfoContent div由于高度从0到50px而打开，并且当ng-mouseleave被触发时，div再次关闭。
 
 
 
然而，由于某种原因，当鼠标离开图像时，不会触发ng-mouseleave，而仅在Google Chrome中。任何人都知道为什么会这样吗？
解决方案
我与Chrome有类似的问题，最终将问题跟踪到特定的Chrome扩展程序（对我来说，这是 AngularJS Batarang 扩展）。
 
 
 
如果你有任何javascript分析扩展，这些添加到您的页面有时可能会导致事件异常行为（特别是鼠标移动事件）。
 
 
 
在Chrome调试器的配置文件选项卡中，使用收集JavaScript CPU配置文件，找出哪些脚本（如果有的话）是猪，然后如果您将鼠标悬停在右侧的脚本中，它将告诉您该猪是哪一种铬扩展。
 
I have set up the following in my angular app

I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}"  ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.

However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.

Anyone know why this is the case?
解决方案
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).

If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).

In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.

                        
这篇关于ng-mouseover和ng-mouseleave事件不能在chrome上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！