angularjs – 在Angular 1.2和Angular 1.6之间触发ng-click和ng-change的顺序的差异

2023年12月31日 305次阅读

AngularJS 1.2和1.6之间发生了一些事情,以扭转ng-click和ng-change fire的顺序.

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

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

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

在AngularJS的开发中发生了什么导致这种情况,并且在使用更新版本的AngularJS时是否有任何方法可以保留以前的行为？

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

编辑：我应该说为什么这很重要.我希望能够在变量变化之前检查变量的值,以便查看是否应该允许变更.我能够使用ng-click AngularJS 1.2来实现这一点,但是因为ng-change首先在AngularJS 1.6上被触发,所以在我决定是否应该继续之前已经进行了更改.如果您对如何使用AngularJS 1.6实现此目标有其他想法,我会非常有兴趣听到它们.

最佳答案 以下是不同版本行为的摘要：

 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 directive单选按钮可以防止选择.

来自Docs：

input[radio] and input[checkbox]

Due to 07001, input[radio] and input[checkbox] now listen to the “change” event instead of the “click” event. Most apps should not be affected, as “change” is automatically fired by browsers after “click” happens.

07002

也

fix(input): listen on “change” instead of “click” for radio/checkbox …

…ngModels

input[radio] and input[checkbox] now listen on the change event instead
of the click event. This fixes issue with 3rd party libraries that trigger
a change event on inputs, e.g. Bootstrap 3 custom checkbox / radio button
toggles.

It also makes it easier to prevent specific events that can cause a checkbox / radio
to change, e.g. click events. Previously, this was difficult because the custom click
handler had to be registered before the input directive’s click handler.

It is possible that radio and checkbox listened to click because IE8 has
broken support for listening on change, see 07003

07004

点赞