如何防止ng-click在標籤上觸發兩次？

Agnular的ng-click會觸發兩次，當我點擊裏面輸入的標籤時。我試過$event.stopPropagation();但沒有工作，如何解決這個問題：？如何防止ng-click在標籤上觸發兩次？

我檢查這個問題也： Angular.js ng-click events on labels are firing twice

<div class="list-group-item" ng-repeat="item in model.data"> 
    <form role="form" name="selectForm" novalidate> 
    <label ng-click="$event.stopPropagation(); updateSelected();"> 
     <input type="checkbox" ng-model="chechkedSkins[item.id]" /> 
     <span>{{item.name}}</span> 
    </label> 
    </form> 
</div>

來源

2015-09-01 Barlas Apaydin

你能複製相同的上的jsfiddle，HTTP：//jsfiddle.net – dreamweiver

'$ event.preventDefault（）;'？ –

@ClaudioBredfeldt preventDefault打破更多的隊友，阿德里安解決了我的問題，檢查下面的答案。 –

使用ng-change="updateSelected"

使用此僅輸入，因爲如果你單擊該標籤的變化，甚至觸發。

來源

2015-09-01 11:19:20

有意義的兄弟，非常感謝+1 –

好那是因爲label是父或容器爲checkbox，所以click處理器連接到完整的容器，你的情況，因此每當無論是label或checkbox被點擊，則觸發事件。

哪些錯誤你的方法：

首先切勿將標籤內的輸入標籤，那不是一個好辦法來構建標記在html.In Angular.js此行爲導致click事件爲兩個標籤觸發。因此在input標籤& label之間添加一個綁定使用標籤的for屬性。
使用內部標籤$event.stopPropagation()實際上會停止從標籤傳播/沸騰到DOM頂部的所有事件。這不會起任何作用，因爲事件仍會傳播到標籤中的輸入。

我希望你能想象我在說什麼。

我做了什麼：

使用for屬性爲input綁定到標籤&添加click事件，以防止默認功能。
添加單擊處理到相應的input標籤&不是label

<label for="username" ng-click="$event.preventDefault();">Click me</label> <input type="text" id="username" ng-click="updateSelected();">

Live Demo @ JSFiddle

這樣你就不必擔心在事件處理的任何衝突，也是其維護HTML代碼的簡潔方式:)

來源

2015-09-01 11:44:08 dreamweiver

感謝您的詳細解釋隊友（+1 –

老兄你已經解決了我的問題，thx很多 – Lukas

我正在使用最新版本的Angular Material 1.0.3，並在點擊配置爲Android上的按鈕的標籤時仍然遇到此問題。我沒有在IOS或瀏覽器（科爾多瓦應用程序）的問題。下面爲我解決了它。

我的html：

<label class="btn btn-primary" ng-click="vm.goAbout()">About</label>

我的控制器：

vm.goAbout = debounceFn(function(){ 
     //show dialog here, and now it only pops up once 
    }, 250, false);

的防抖動功能：

function debounceFn(func, wait, immediate){ 
     var timeout; 
     var deferred = $q.defer(); 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if(!immediate) { 
       deferred.resolve(func.apply(context, args)); 
       deferred = $q.defer(); 
       } 
      }; 
      var callNow = immediate && !timeout; 
      if (timeout) { 
       $timeout.cancel(timeout); 
      } 
      timeout = $timeout(later, wait); 
      if (callNow) { 
       deferred.resolve(func.apply(context,args)); 
       deferred = $q.defer(); 
      } 
      return deferred.promise; 
     } 
    }

來源

2016-01-22 21:29:28 Helzgate

非常感謝這個響應隊友（： –

如何防止ng-click在標籤上觸發兩次？

回答

相關問題