CODEWITHSUNDEEP
jqueryangularjsgoogle-chromemouseenter
elevenMinutes
elevenMinutes

Reputation: 171

Angular mouseenter doesn't work in Chrome

I'm coding my first app in Angular and I came across the problem with mouseenter event. It doesn't work in Chrome at all. Firstly I thought I have a bug in my code but I had checked it in Firefox and everything worked fine. I decided to test some code with mouseenter from jsfiddle and it looks the same - on firefox ok, on chrome not - after mouseenter on li, nothing happens.

Tested code: 

<!DOCTYPE html>
<html ng-app="my-app">
    <head>
        <meta charset="utf-8" />         
              <style>
            /* Put your css in here */
            button {
                position: relative;
                float:right;
                top:-40px;
                right:0;
            }
            li {
                background: #eee;
                padding: 5px;
                list-style:none;
                width: 200px;
            }
        </style>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('my-app', [], function () {
            })
            app.controller('AppController', function ($scope) {
            $scope.name = 'World';
            })
        </script>
    </head>

    <body ng-controller="AppController">
        <p>Hello {{name}}!</p>
        <ul>
            <li ng-mouseenter="showXBtn = true;
                                test($event)" ng-mouseleave="showXBtn = false;
                                                    test($event)">
                <p ng-mouseenter="showXBtn = false;" ng-mouseleave="showXBtn = true;
                                    test($event)">Hide</p>
                <button ng-show="showXBtn"><span>x</span></button>
            </li>
        </ul>
        {{showXBtn}}
    </body>
</html>

I use AngularJS v1.2.5. Is it a official reported bug ? Or maybe with my chrome is something wrong.. I have the latest version 38.0.2125.111 m. Thanks for any suggestions.

Upvotes: 3

Views: 1601

Answers (1)

Troy
Troy

Reputation: 21872

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 mouseenter and mouseleave events).

Upvotes: 1

Related Questions