Angular.js NG-點擊標籤事件被解僱兩次

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連接到標籤時纔會發生這種情況。當它連接到輸入元素時，所有事情都按預期工作。

有人可以解釋發生了什麼？

來源

2013-12-19 wmil

這很奇怪，如果您將「label」更改爲「div」，它可以正常工作 –

看看這個答案：

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

而且，我已經編輯您的plnkr展示活動對象：

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

輸入和標籤元素接收事件。

爲了避免這種情況，您可以在執行任何操作之前檢查事件目標的標記名稱。

編輯

至於爲什麼是這樣的：標籤的方式div的或其他元素不會實際上是聯繫在一起的輸入元素。該輸入被稱爲標籤的labeled control。

當你觸發標籤上的行動，這一行動也將標識控制運行：

例如，在平臺上，其中點擊一個複選框標籤檢查複選框，單擊下面的代碼片段標籤可以觸發用戶代理在輸入元素上運行合成點擊激活步驟，就好像元素本身已被用戶觸發一樣

來源

2013-12-19 19:20:56 David

Angular.js NG-點擊標籤事件被解僱兩次

回答

相關問題