2014-12-29 9 views
7

ho predisposto il seguente nella mia app angolareng-mouseover e NG-mouseLeave eventi non funziona su Chrome

Ho un'immagine con i seguenti eventi ng-mouseover e ng-MouseLeave legati al tag immagine

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

Questi mouse sopra gli eventi vengono poi inviate al seguente div

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

quindi quando ng-mouseover viene attivato il div dataBoxInfoContent apre a causa dell'altezza che va da 0 a 50px e quando ng-mouseleave viene attivato il div si chiude nuovamente.

Tuttavia per qualche motivo ng-mouseleave non viene attivato quando il mouse lascia l'immagine e questo è solo in Google Chrome. Tutto funziona bene in internet explorer e mozilla firefox.

Qualcuno sa perché questo è il caso?

+1

Questi tipi di problemi sono difficili da isolare. Puoi essere sicuro al 100% che il congedo del mouse non stia sparando? Stai basando questo sul fatto che lo stile non sta cambiando? Hai preso in considerazione l'impostazione di 'infoIconStyle' su un insieme predefinito di classi piuttosto che uno stile in linea? Chrome potrebbe rispondere meglio. Costruisci un paio di classi che soddisfano questi stili e poi al passaggio del mouse e lascia fare qualcosa come "infoIconStyle =" classname "'. –

+0

Abbastanza sicuro che questo è un problema CSS, non angolare. Se puoi fare una demo .. altrimenti non è possibile indovinare, perché 'ngMouseleave' ovviamente funziona bene in Chrome. – dfsq

+0

Ho provato a passare i nomi delle classi e non i css in linea e ho ancora lo stesso problema ma solo in Chrome. Tutto funziona bene in firefox e IE – ocajian

risposta

19

Ho avuto un problema simile con Chrome e alla fine ho rintracciato il problema in una specifica estensione di Chrome (per me era l'estensione AngularJS Batarang).

Se si dispone di estensioni per la creazione di profili javascript, la lentezza con cui tali componenti si aggiungono alla propria pagina può talvolta causare un comportamento anomalo negli eventi (in particolare, gli eventi movimento del mouse).

Nella scheda "Profili" del debugger di Chrome, utilizzare "Raccogli profilo CPU JavaScript" per scoprire quali script, se presenti, sono porci, quindi se si passa il mouse sopra lo script a destra, verrà visualizzato tu di quale estensione cromato fa parte il maiale.

+0

Grazie per questo. Daremo uno sguardo al mio profilo CPU JavaScript se questo accade di nuovo. E 'successo una volta o due volte che viene risolto quando riavvio il mio PC ... – ocajian

+0

Grazie. La terza volta AngularJS Batarang mi ha fregato. –

+1

FWIW, [Batarang ha bisogno di amore] (https://github.com/angular/angularjs-batarang/issues/194). –