Created
September 9, 2015 03:50
-
-
Save VWoeltjen/c0d9b9bb182e96725891 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script type="text/javascript" | |
| src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| var app = angular.module('bug', []); | |
| function BugController($scope, $element) { | |
| function mouseEntered() { | |
| $scope.counter += 1; | |
| $scope.$apply(); | |
| } | |
| $scope.toggle = function () { | |
| $scope.tracking = !$scope.tracking; | |
| $element[$scope.tracking ? 'on' : 'off']('mouseenter', mouseEntered); | |
| }; | |
| $scope.tracking = false; | |
| $scope.counter = 0; | |
| } | |
| app.controller("BugController", ['$scope', '$element', BugController]); | |
| </script> | |
| </head> | |
| <body ng-app="bug"> | |
| <p> | |
| While mouse entry is being tracked, you should expect to see the counter | |
| increase by one every time the mouse enters the div below. | |
| </p> | |
| <p> | |
| However, toggle a few times; observe that the counter starts incrementing | |
| by more than one after being toggled. | |
| </p> | |
| <p> | |
| More generally, the mouseenter event is being fired N times, where N is | |
| the number of calls to $element.on('mouseenter', fn), even though N-1 | |
| $element.off('mouseenter', fn) calls have been issued. | |
| </p> | |
| <div ng-controller="BugController" | |
| style="width:400px; height: 400px; border: 1px blue solid;"> | |
| <p>{{tracking ? "Tracking mouse entry." : "Not tracking mouse entry."}}</p> | |
| <p><input type="button" ng-click="toggle()" value="Toggle"></p> | |
| <p>Tracked mouse entries: {{counter}}</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment