Ember.js 单击子组件时，如何防止调用父组件上的操作？

我在一个项目中有以下模板：

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

{{input type=“checkbox”checked=isChecked}
{{item.name}

我遇到的问题是，单击复选框不会更改其状态。但是，它会触发

expandItem

操作。我希望其行为是，单击复选框会更改

isChecked

，但单击div中的任何其他位置会触发

expandItem

。我怎样才能做到这一点

EDIT：这个问题非常接近，但我看到的区别是，另一个问题中的子元素使用{{action}}帮助器，它可以很容易地停止传播，并使用bubbles=false。在我的例子中，我不一定要了解Ember的默认输入组件是如何使动作冒泡的

---

第二次编辑：我完全重新创建了我在中看到的行为。您将注意到输入组件和内联

action

helper的行为是如何不同的。希望这能有所帮助。

我对这个问题很感兴趣，据我所知，没有任何本地方法可以防止从输入助手冒泡事件

但有一个解决办法。创建浮动在复选框上方的不可见div，并使用选择基础复选框的单击事件：

模板：

---

由于Ember 1.13.3，您可以执行以下操作（示例不使用input helper，如果可能，我不建议使用它）：

模板：

您不能仅使用

bubbles=false

停止操作的传播，因为在这种情况下

event.preventDefault

也称为禁用默认复选框行为

---

这里是@DeepakJose可能的副本-它非常接近，我看到的区别是另一个问题中的子元素使用了

{action}

帮助程序，它可以很容易地停止传播

气泡=false

。在我的例子中，我不一定要了解Ember的默认输入组件如何对操作进行冒泡。请尝试

{{{Input type=“checkbox”checked=isChecked bubbles=false}

@locks，只是尝试了一下……没有更改

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

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

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

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