Tıklama tıklamalarının etiket etiketinde iki kez tetiklenmesi nasıl önlenir?

Question

İçinde giriş bulunan etikete tıkladığımda, Agnular'ın tıklama tıklaması iki kez tetiklenir. Ben $event.stopPropagation(); denedim ama işe yaramadı, nasıl çözülür:? Ben de bu soruyu kontrol ettim

: 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> 

Answer 1

Kullanım ng-change="updateSelected"

bunu kullanın sadece etiketi tıklarsanız değişiklik bile tetiklenir beri girişi.

Answer 2

Eh şu labellabel veya checkbox ya tıklandığında böylece her, checkbox için ebeveyn veya konteyner, yani click işleyicisi sizin durumunuzda komple konteyner bağlı olduğu için, olay tetiklenir.

---

Sorun ne senin yaklaşımla:

• Öncelikle asla html.In Angular.js yapılan işaretlemeleri inşa etmek için iyi bir yol değil şu etiketin içinde girdi etiketlerini eklemek bu davranış tıklama olayına neden olur her iki etiket için de tetiklenecek. input etiketi & label arasında bağlayıcı eklemek için etiketin for özniteliğini kullanın.
• İç etiketin içinde, $event.stopPropagation() etiketinin kullanılması aslında tüm olayların DOM'dan etiketin üst kısmına yayılmasını/kaynatılmasını durdurur. Bu, herhangi bir amaca hizmet etmeyecektir, çünkü etkinlik yine de etikette bulunan girdiye yayılacaktır.

Umarım ne söylediğimi görselleştirebilirsiniz.

Ben ne yaptım:

• Kullanımı for nitelik varsayılan işlevselliğini engellemek için bir click olay eklemek etiket & için input bağlamak.

• ilgili input etiketi & tıklama işleyicisi ekleyin değil label

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

Live Demo @ JSFiddle

olay işleme herhangi çakışmaları hakkında endişelenmenize gerek yok Bu şekilde, ayrıca HTML kodunu korumak için düzgün bir yolu da vardır :)

Answer 3

Angular Material 1.0.3'ün en son sürümünü kullanıyorum ve Android'de düğmeler olarak yapılandırılmış etiketlere tıkladığınızda hala bu sorunla karşılaşıyorum. IOS veya tarayıcıda sorun yok (cordova uygulaması). Aşağıdaki benim için çözüldü.

benim html:

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

benim denetleyicisi:

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

filtreleme fonksiyonu:

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; 
     } 
    }