javascript ng-focus 触发两次，ng-blur 从不触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27804949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-focus firing twice and ng-blur never fires
提问by Matt Hintzke
I am fairly experience with Angular by now, but this appears to be something happening at a lower level with the way DOM events are propagated. For some reason in just part of my application I have ng-focusand ng-bluron the same input, but the ng-focusevent fires twice and the ng-blurnever fires.
我现在对 Angular 有相当的经验，但这似乎是在较低级别发生的事情，与 DOM 事件的传播方式有关。出于某种原因，在我的应用我的只是一部分ng-focus，并ng-blur在同一个input，但ng-focus事件触发两次，ng-blur从未火灾。
<input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />
Then in my controller
然后在我的控制器中
$scope.doFocus = function(){
console.log('focus');
}
$scope.doBlur = function(){
console.log('blur');
}
When I inspect my console, I see 2 "focus" and no "blur" messages... I have tested this in other parts of my website and it works in some others. My guess is it has something to do with the DOM, but I have even tried pulling out basically everything on the page except the inputand it still didn't work correctly. Does anyone have any idea what could cause this?
当我检查我的控制台时，我看到 2 个“焦点”而没有“模糊”消息......我已经在我网站的其他部分测试过它并且它在其他一些部分工作。我的猜测是它与 DOM 有关，但我什至尝试拉出页面上的所有内容input，但仍然无法正常工作。有谁知道是什么导致了这种情况？
UPDATE
更新
After some more debugging, I noticed that the focus event is fired once in the scope of the browser, but the event triggers twice in the world of AngularJS. I set a breakpoint on all Focus events using Chrome Dev Tools and it only would hit once, but if I log the Angular $eventin the console, I can see the EXACT same $event with the same timestamp being triggered twice in Angular.
经过更多的调试，我注意到焦点事件在浏览器范围内触发了一次，但在 AngularJS 的世界中该事件触发了两次。我使用 Chrome Dev Tools 在所有 Focus 事件上设置了一个断点，它只会命中一次，但是如果我$event在控制台中记录 Angular ，我可以看到完全相同的 $event 具有相同的时间戳在 Angular 中被触发两次。
回答by Matt Hintzke
Ok.. so this is kind of a strange one. After not finding a solution myself, I had a coworker try to reproduce my problem on his machine. Of course, it worked just fine for him.. this made me think it was my Chrome, so I uninstalled and re-installed a fresh instance of Chrome and now it everything is just fine... not sure what happened to my Chrome that caused the DOM events to get all kinds of messed up, but at least I figured it out.
好吧..所以这有点奇怪。在自己找不到解决方案后，我让一位同事尝试在他的机器上重现我的问题。当然，它对他来说效果很好......这让我认为这是我的 Chrome，所以我卸载并重新安装了一个新的 Chrome 实例，现在一切都很好......不知道我的 Chrome 发生了什么导致 DOM 事件变得各种各样，但至少我想通了。
Hopefully this helps anyone that may have this problem in the future.
希望这可以帮助将来可能遇到此问题的任何人。
UPDATE
更新
I realized the problem was the Chrome Extension: AngularJS Batarang
我意识到问题出在 Chrome 扩展：AngularJS Batarang
This plugin was messing with my DOM events and caused them to not fire correctly. I removed the extension from Chrome and everything started working!
这个插件搞乱了我的 DOM 事件并导致它们不能正确触发。我从 Chrome 中删除了扩展程序，一切都开始工作了！
回答by Mike
Just in case you're like me and don't read the docs...
以防万一你像我一样不阅读文档......
You can't just apply on-blur/on-focus to any element. There are limited form elements as well as the window object that support it. Doesn't work on lots of other tag types... one more reason either of these 2 events might not fire...
您不能仅将 on-blur/on-focus 应用于任何元素。有限的表单元素以及支持它的窗口对象。不适用于许多其他标签类型......这两个事件中的任何一个可能不会触发的另一个原因......
回答by Rich
This was driving me nuts until I discovered that it is a known bug with angular-batarang. See: https://github.com/angular/angularjs-batarang/issues/211. (Please star the issue if it is still not fixed when you read this.)
这让我发疯，直到我发现这是一个已知的 angular-batarang 错误。请参阅：https: //github.com/angular/angularjs-batarang/issues/211。（如果您在阅读本文时仍未解决问题，请为该问题加注星标。）
With batarang installed and enabled, only the first declared ng-blur or ng-focus will fire.
安装并启用 batarang 后，只有第一个声明的 ng-blur 或 ng-focus 会触发。
E.g. if you have,
例如，如果你有，
<input ng-blur='onBlur()' ng-focus='onFocus()'>
you will get the blur event but not the focus event. If you have,
您将获得模糊事件，但不会获得焦点事件。如果你有，
<input ng-focus='onFocus()' ng-blur='onBlur()'>
you will get the focus event but not the blur event.
您将获得焦点事件，但不会获得模糊事件。
If you are hitting this problem, until it is fixed the workaround is just to disable batarang when you are working with these events using the "Enable" checkbox shown here:
如果您遇到此问题，在解决此问题之前，解决方法只是在您使用此处显示的“启用”复选框处理这些事件时禁用batarang：
回答by NFlourish
This can also happen with other extensions installed. In my case ng-blur was firing twice when I clicked on a radio button. One click, two blur events - no matter if the radio had already been selected.
安装其他扩展程序时也会发生这种情况。在我的例子中，当我点击一个单选按钮时，ng-blur 会触发两次。单击一次，两次模糊事件 - 无论是否已选择收音机。
After some testing, I discovered that AdBlock was the problem. This is slightly problematic; I cannot assume my users won't have it. I have to assume the radio buttons will always blur twice.
经过一些测试，我发现 AdBlock 是问题所在。这有点问题；我不能假设我的用户不会拥有它。我必须假设单选按钮总是会模糊两次。
I will keep looking for another workaround.
我会继续寻找另一种解决方法。
回答by Amir Popovich
You must have something else wrong in your code.
您的代码中一定有其他错误。
When trying this:
尝试此操作时：
<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');
}
});
It works just fine.
Check it out here.
它工作得很好。检查一下here。
