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

ki0zmccv  于 2023-03-21  发布在  Java
关注(0)|答案(5)|浏览(134)

到目前为止,我对Angular已经相当有经验了,但这似乎是在较低级别上发生的DOM事件传播方式的问题。出于某种原因,在我的应用程序的一部分中,我在同一个input上有ng-focusng-blur,但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,它仍然不能正常工作。有人知道是什么原因导致的吗?

更新

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

2ic8powd

2ic8powd1#

好吧..所以这是一个有点奇怪的问题。在我自己没有找到解决方案之后,我让一个同事尝试在他的机器上重现我的问题。当然,对他来说效果很好..这让我以为是我的Chrome,所以我卸载并重新安装了一个新的Chrome示例,现在一切都很好…我不知道我的Chrome发生了什么事,导致DOM事件变得一团糟,但至少我弄明白了。
希望这能帮助任何将来可能遇到这个问题的人。

更新

我发现问题出在Chrome扩展上:AngularJS Batarang**
这个插件扰乱了我的DOM事件,导致它们不能正确触发。我从Chrome中删除了这个扩展,一切都开始工作了!

s2j5cfk0

s2j5cfk02#

这是驾驶我坚果,直到我发现,这是一个已知的错误与angular-batarang.见:https://github.com/angular/angularjs-batarang/issues/211.(如果您阅读本文时问题仍未解决,请在问题上打上星号。)
安装并启用batarang后,只有第一个声明的ng-blur或ng-focus才会触发。
例如,如果您有,

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

你会得到模糊事件,但不是焦点事件。如果你有,

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

你会得到焦点事件而不是模糊事件。
如果你遇到这个问题,直到它是固定的解决方法只是禁用batarang当你正在使用这些事件的“启用”复选框显示在这里:

cuxqih21

cuxqih213#

更新注解:我在2016年回答了这个问题,那时Angular 2.0还没有出现。所以请记住这一点。这可能不适用于你......
如果你像我一样,不读the docs...
你不能只对任何元素应用on-blur/on-focus。支持它的表单元素和窗口对象都很有限。对很多其他标签类型都不起作用...这两个事件可能都不会触发的另一个原因是...

mwyxok5s

mwyxok5s4#

您的代码中一定还有其他错误。
尝试此操作时:

<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

xe55xuns

xe55xuns5#

这也可能发生在安装了其他扩展的情况下。在我的例子中,当我点击一个单选按钮时,ng-blur会触发两次。一次点击,两次模糊事件-无论单选按钮是否已经被选中。
经过一些测试,我发现AdBlock是问题所在,这是稍微有问题的;我不能假设我的用户不会有它。我必须假设单选按钮总是模糊两次。
我会继续寻找另一个变通方案。

相关问题