ng-focus触发两次,而ng-blur从不触发

19 浏览
0 Comments

ng-focus触发两次,而ng-blur从不触发

我对 Angular 有一定的经验,但是这似乎是DOM事件传播的低层次问题。出现了一个问题,我的应用程序的某个部分有标签上的ng-focus和ng-blur,但是ng-focus事件会触发两次,而ng-blur事件却从未触发。


然后在我的控制器中...

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

当我检查控制台时,发现有2个“focus”消息和没有“blur”消息……我在网站的其他部分测试过它,有些地方它可以工作。我猜测这与DOM有关,但我甚至试着除了以外基本上把页面上的所有东西都删除了,它仍然无法正确工作。请问有人知道这是什么原因吗?

更新

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

admin 更改状态以发布 2023年5月24日
0
0 Comments

这问题曾经让我十分苦恼,直到我发现它是与angular-batarang相关的已知bug。请参考:https://github.com/angular/angularjs-batarang/issues/211。(如果你在读这篇文章时这个问题还没被解决,请为该问题点一个星星。)

如果安装并启用了batarang,只有第一次声明的ng-blur或ng-focus事件才会被触发。

例如,如果你有:

    

你将只会得到blur事件,但不会得到focus事件。如果你有:

    

你将只会得到focus事件,但不会得到blur事件。

如果你遇到了这个问题,在修复之前的解决方法就是在处理这些事件时禁用batarang,方法是勾选这里显示的“启用”复选框:

显示禁用batarang的图像

0
0 Comments

好的...这个情况有点奇怪。在自己找不到解决办法后,我让一位同事在他的电脑上尝试重现我的问题。当然,他的电脑上一切都正常...这让我认为问题出在我的Chrome上,所以我卸载了它并重新安装了一个全新的实例,现在一切都正常了...不确定发生了什么让我的Chrome导致DOM事件混乱不堪,但至少我找到了解决办法。

希望这可以帮助将来有这个问题的人。

更新

我意识到问题出在Chrome扩展程序: AngularJS Batarang

这个插件干扰了我的DOM事件并导致它们无法正确触发。我从Chrome中删除了这个扩展程序,一切都开始正常工作了!

0