라벨의 Angular.js ng-click 이벤트가 두 번 발생합니다.

라벨의 Angular.js ng-click 이벤트가 두 번 발생합니다.

angular.js를 사용한 다음 코드 지정

여기: 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이 라벨에 연결되어 있을 때만 발생합니다.입력 요소에 연결되면 모든 것이 예상대로 작동합니다.

무슨 일인지 누가 설명 좀 해줄래?

다음 답변을 참조하십시오.

https://stackoverflow.com/a/17185362/3093703

또한 이벤트 대상을 표시하기 위해 당신의 plnkr을 편집했습니다.

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

입력 요소와 라벨 요소 모두 이벤트를 수신하고 있습니다.

이를 방지하기 위해 액션을 수행하기 전에 이벤트 대상의 태그 이름을 확인할 수 있습니다.

편집

그 이유에 대해서: 라벨은 실제로 div나 다른 요소와는 다른 방식으로 입력 요소에 연결되어 있습니다.이 입력을 레이블이 지정된 컨트롤이라고 합니다.

라벨에서 액션을 트리거하면 라벨이 붙은 컨트롤에서도 액션이 실행됩니다.

예를 들어 체크박스라벨을 클릭하면 체크박스가 켜지는 플랫폼에서는 다음 스니펫의 라벨을 클릭하면 사용자 에이전트가 입력 요소에 대해 클릭 액티베이션스텝을 실행할 수 있습니다.이것은 마치 요소 자체가 사용자에 의해 트리거된 것과 같습니다.

언급URL : https://stackoverflow.com/questions/20689531/angular-js-ng-click-events-on-labels-are-firing-twice