Wie kann ich verhindern, dass eine Aktion für eine übergeordnete Komponente aufgerufen wird, wenn ich auf eine untergeordnete Komponente klicke?

Question

Ich habe das folgende Stück Vorlage in einem Projekt arbeite ich an:

<div class="item row" {{action "expandItem"}}> 
    {{input type="checkbox" checked=isChecked}} 
    {{item.name}} 
</div> 

Der Ärger, den ich in laufende bin ist, dass das Kontrollkästchen klicken nicht ändert seinen Zustand. Es wird jedoch die Aktion expandItem ausgelöst. Ich möchte das Verhalten sein, dass das Klicken auf das Kontrollkästchen ändert isChecked, aber Klicken irgendwo anders in der div löst expandItem. Wie kann ich das erreichen?

EDIT: Die Frage Stop click propagation from Ember action ist sehr nahe, aber der Unterschied, wie ich sehe, ist, dass das Kind-Element in der anderen Frage den {{action}} Helfer, der kann die Ausbreitung mit bubbles = false leicht stoppen. In meinem Fall habe ich nicht unbedingt einen Haken darin, wie Embers Standard-Eingabekomponente die Aktion durchbrennt.

ZWEITE BEARBEITUNG: Ich habe genau das Verhalten wiederhergestellt, das ich in this JSBin10 sehe. Sie werden feststellen, wie sich die Eingabekomponente und der Inline-Helper action anders verhalten. Hoffe das hilft.

Answer 1

Ich war fasziniert von diesem Problem, soweit ich sehe, gibt es keine native Möglichkeit zu verhindern, dass das Ereignis von einem Eingabe-Helfer sprudelt.

Aber es gibt einen Workaround. Erstellen Sie eine nicht sichtbare div über der Checkbox schwimmen, und mit einem Klick Ereignis, das die darunter liegende Checkbox wählt:

Vorlage:

<div class="item row" {{action "expandItem"}}> 
    <div style="position-absolute; display: inline-block;"> 
    <div {{action "toggleSelect" bubbles=false}} style="position: absolute;left: 0;width: 12px;top: 0;bottom: 0;"></div> 
    {{input type="checkbox" checked=isChecked}} 
    </div> 
    {{item.name}} 
</div> 

Aktion in Controller/Component:

actions: { 
    toggleSelect() { 
    this.set('isChecked', !this.get('isChecked')); 
    } 
} 

Answer 2

Seit Ember 1.13.3 können Sie folgendes tun (das Beispiel verwendet keinen Eingabehelfer und ich würde es nicht empfehlen, wenn möglich):

Vorlage:

<label onclick={{action "stopPropagation"}}> 
    <input type="checkbox" checked={{checked}} 
      onchange={{action "check" value="target.checked"}}> 
</label> 

Component/Controller:

actions: { 
    check() { 
     this.toggleProperty('checked');  
    }, 
    stopPropagation(event) { 
     event.stopPropagation(); 
    } 
} 

Sie können nicht nur Aktion stoppen, da event.preventDefault in diesem Fall mit bubbles=false Ausbreitung auch Standard-Checkbox behavour genannt wird deaktivieren.

Hier ist Ember Twiddle