5

AngularJS 1.2 和 1.6 之间发生了一些事情来反转顺序ng-clickng-change触发。

我做了一个说明来说明它:http ://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview

此页面的默认设置是使用Angular 1.2.28. 在这种情况下,如果您更改示例中的单选按钮,您将看到 click 事件在 change 事件之前触发。

如果您随后切换注释以使用 Angular 1.6.10,您将看到 change 事件现在在 click 事件之前触发。

AngularJS 的开发中发生了什么导致这种情况,有没有办法在使用更新版本的 AngularJS 时保留以前的行为?

非常感谢您提供的任何帮助!

编辑:我可能应该说为什么这很重要。我希望能够在变量更改之前检查变量的值,以查看是否应允许更改。我可以ng-click在 AngularJS 1.2 上执行此操作,但因为ng-change在 AngularJS 1.6 上首先触发,所以在我决定是否应该继续之前已经进行了更改。如果您对如何使用 AngularJS 1.6 实现这一点有其他想法,我很想听听他们的意见。

4

1 回答 1

2

以下是不同版本的行为总结:

 AngularJS V1.2   CLICK handler fires first    
 AngularJS V1.3   CHANGE handler fires first
 AngularJS V1.4   CHANGE handler fires first
 AngularJS V1.5   CHANGE handler fires first
 AngularJS V1.6   CHANGE handler fires first
 AngularJS V1.7   CLICK handler fires first

依赖于元素事件顺序的代码缺乏健壮性。只写健壮的代码。避免依赖于库或浏览器的无保证功能的脆弱代码。

使用单选按钮上的ng-disabled指令来防止选择。


从文档:

输入[收音机]和输入[复选框]

由于656c8finput[radio]现在input[checkbox]监听“change”事件而不是“click”事件。大多数应用程序不应该受到影响,因为在“点击”发生后浏览器会自动触发“更改”。

— AngularJS 开发人员指南 - 迁移到 V1.7

修复(输入):收听“更改”而不是“点击”收音机/复选框......</h2>

…ngModels

input[radio]现在监听 change 事件而input[checkbox]不是 click 事件。这修复了触发输入更改事件的 3rd 方库的问题,例如 Bootstrap 3 自定义复选框/单选按钮切换。

它还可以更轻松地防止可能导致复选框/单选更改的特定事件,例如单击事件。以前,这很困难,因为必须在输入指令的点击处理程序之前注册自定义点击处理程序。

收音机和复选框可能会听到点击,因为 IE8 已经破坏了对监听更改的支持,请参阅http://www.quirksmode.org/dom/events/change.html

— Github 提交 #656c8f

于 2018-07-31T13:31:38.053 回答