Angular.js ng-click события на ярлыках запускаются дважды

33

Учитывая следующий код, используя angular.js

Plunkr здесь: http://plnkr.co/edit/i4MAzs

HTML:

<form name="myForm" ng-controller="Ctrl">
  Try clicking on the labels. <br/>
  <label>
    Value1: <input type="checkbox" ng-checked='value1' ng-click='toggleValue1()'>
  </label> <br/>
  <label ng-click='toggleValue2()'>
    Value2: <input type="checkbox" ng-checked="value2">
  </label> <br/>
  <tt>value1 = {{value1}}</tt><br/>
  <tt>value2 = {{value2}}</tt><br/>
  <tt>fire_count = {{fire_count}}</tt>
</form>

JavaScript:

angular.module('App', []);

function Ctrl($scope) {
  $scope.value1 = true;
  $scope.value2 = 'YES'
  $scope.fire_count = 0;

  $scope.toggleValue1 = function(){
    $scope.value1 = !$scope.value1;
    $scope.fire_count++;
    console.log("Clicked!");
  }

  $scope.toggleValue2 = function(){
    $scope.value2 = !$scope.value2;
    $scope.fire_count++;
    console.log("Clicked!");
  }
}

Событие клика будет срабатывать дважды, когда вы нажмете на метку "Value2". Это происходит только при прикреплении ng-click к метке. Когда он прикреплен к входному элементу, все работает так, как ожидалось.

Может кто-нибудь объяснить, что происходит?

  • 0
    Это очень странно, если вы измените «label» на «div», это будет работать правильно
Теги:

1 ответ

46
Лучший ответ

Взгляните на этот ответ:

https://stackoverflow.com/questions/17185265/jquery-click-event-triggers-twice-when-clicked-on-html-label

Кроме того, я отредактировал ваш plnkr, чтобы показать цель события:

http://plnkr.co/edit/73aslwHnwVcTd2fxSJ0f?p=preview

Оба элемента ввода и метки получают событие.

Чтобы этого избежать, вы можете проверить имя тега цели перед выполнением каких-либо действий.

Edit

В чем причина: метка фактически привязана к входному элементу таким образом, что div или другие элементы не будут. Ввод называется меткой с меткой управления.

Когда вы запускаете действие над меткой, это действие также выполняется на маркированном элементе управления:

Например, на платформах, где щелчок на флажке флажка проверяет флажок, щелчок по метке в следующем фрагменте может привести к тому, что пользовательский агент запускает шаги активации синтетического щелчка на элементе ввода, как если бы сам элемент был вызван пользователь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню