Angular 1.2 和 Angular 1.6 之间触发 ng-click 和 ng-change 的顺序不同
Difference in order that ng-click and ng-change are fired between Angular 1.2 and Angular 1.6
AngularJS 1.2 和 1.6 之间发生了一些事情,颠倒了 ng-click
和 ng-change
触发的顺序。
我做了个小插曲来说明:http://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview
此页面默认使用 Angular 1.2.28
。在这种情况下,如果您更改示例中的单选按钮,您将看到点击事件在更改事件之前触发。
如果您随后切换注释以便使用 Angular 1.6.10,您将看到更改事件现在在点击事件之前触发。
在 AngularJS 的开发过程中发生了什么导致了这个问题,有什么方法可以在使用更新版本的 AngularJS 的同时保留以前的行为?
非常感谢您的帮助!
编辑:我应该说说为什么这很重要。我希望能够在变量更改之前检查变量的值,以便查看是否应该允许更改。我能够在 AngularJS 1.2 上使用 ng-click
来做到这一点,但是因为 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 来防止选择。
来自文档:
input[radio] and input[checkbox]
Due to 656c8f, 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.
还有
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 http://www.quirksmode.org/dom/events/change.html
AngularJS 1.2 和 1.6 之间发生了一些事情,颠倒了 ng-click
和 ng-change
触发的顺序。
我做了个小插曲来说明:http://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview
此页面默认使用 Angular 1.2.28
。在这种情况下,如果您更改示例中的单选按钮,您将看到点击事件在更改事件之前触发。
如果您随后切换注释以便使用 Angular 1.6.10,您将看到更改事件现在在点击事件之前触发。
在 AngularJS 的开发过程中发生了什么导致了这个问题,有什么方法可以在使用更新版本的 AngularJS 的同时保留以前的行为?
非常感谢您的帮助!
编辑:我应该说说为什么这很重要。我希望能够在变量更改之前检查变量的值,以便查看是否应该允许更改。我能够在 AngularJS 1.2 上使用 ng-click
来做到这一点,但是因为 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 来防止选择。
来自文档:
input[radio] and input[checkbox]
Due to 656c8f,
input[radio]
andinput[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.
还有
fix(input): listen on "change" instead of "click" for radio/checkbox …
…ngModels
input[radio]
andinput[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 http://www.quirksmode.org/dom/events/change.html