ng-focus两次射击，ng-blur从不射击

Question

我现在对Angular有相当的经验，但这似乎是在DOM事件传播方式的较低层次上发生的事情。由于某些原因，在我的应用程序的一部分中，ng-focus和ng-blur位于同一input，但ng-focus事件触发两次，而ng-blur从未触发

<input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />

然后在我的控制器中

$scope.doFocus = function(){
    console.log('focus');
}

$scope.doBlur = function(){
    console.log('blur');
 }

当我检查我的控制台时，我看到2个“焦点”而没有“模糊”消息......我已经在我的网站的其他部分测试了这个并且它在其他一些部分中有效。我的猜测是它与DOM有关，但我甚至试图除了input之外基本上拔出页面上的所有内容，但它仍然无法正常工作。有没有人知道是什么原因引起的？

更新

经过一些调试后，我注意到焦点事件在浏览器范围内被触发一次，但事件在AngularJS的世界中触发了两次。我使用Chrome Dev Tools设置了所有Focus事件的断点，它只会打一次，但如果我在控制台中记录Angular $event，我可以看到EXACT相同的$事件，同时触发两次相同的时间戳角。

Answer 1

好的..所以这有点奇怪。在我自己找不到解决方案后，我让同事试图在他的机器上重现我的问题。当然，它对他来说效果很好..这让我觉得这是我的Chrome，所以我卸载并重新安装了一个新的Chrome实例，现在一切都很好......不确定我的Chrome发生了什么事导致DOM事件变得混乱，但至少我弄明白了。

希望这有助于将来可能遇到此问题的任何人。

<强>更新

我意识到问题是Chrome扩展程序： AngularJS Batarang

这个插件搞乱了我的DOM事件并导致它们无法正确触发。我从Chrome中移除了扩展程序，一切都开始工作了！

Answer 2

这让我疯狂，直到我发现这是一个已知的角度 - 巴塔朗的错误。见：https://github.com/angular/angularjs-batarang/issues/211。 （如果您在阅读本文时仍未解决问题，请将问题加注星标。）

安装并启用batarang后，只会触发第一个声明的ng-blur或ng-focus。

E.g。如果你有，

    <input ng-blur='onBlur()' ng-focus='onFocus()'>

您将获得模糊事件，但不会获得焦点事件。如果你有，

    <input ng-focus='onFocus()' ng-blur='onBlur()'>

您将获得焦点事件，但不会获得模糊事件。

如果您遇到此问题，在解决此问题之前，解决方法就是在使用＆＃34;启用＆＃34;处理这些事件时禁用batarang。复选框显示在这里：

Answer 3

万一你喜欢我并且不读the docs ......

您无法将on-blur / on-focus应用于任何元素。有限的表单元素以及支持它的窗口对象。不会处理很多其他标签类型......这两个事件中的任何一个都可能无法触发......

Answer 4

您的代码中必须有其他错误。

尝试时：

<div ng-app="app" ng-controller="appCtrl">
    <input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />
</div>

angular.module('app',[]).
controller('appCtrl', function($scope){
    $scope.doFocus = function(){
        console.log('focus');
    }

    $scope.doBlur = function(){
        console.log('blur');
    }
});

它运作得很好。 请查看here。

Answer 5

安装其他扩展程序也会发生这种情况。在我的情况下，当我点击单选按钮时，ng-blur发射了两次。一键，两个模糊事件 - 无论收音机是否已被选中。

经过一些测试，我发现AdBlock就是问题所在。这有点问题;我不能认为我的用户不会拥有它。我必须假设单选按钮总是模糊两次。

我会继续寻找另一种解决方法。