如何在单击子组件时阻止对父组件的操作进行调用？

Question

我正在处理的项目中有以下模板:

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

我遇到的麻烦是单击复选框不会改变其状态.然而,它确实触发了这一expandItem行动.我希望行为是点击复选框更改,isChecked但点击div火灾中的任何其他地方expandItem.我怎么能做到这一点？

编辑:从Ember动作停止点击传播的问题非常接近,但我看到的差异是另一个问题中的子元素正在使用{{action}}帮助器,它可以轻松地停止使用bubbles = false进行传播.在我的情况下,我不一定了解Ember的默认输入组件如何影响该操作

第二次编辑:我重新创建了我在这个JSBin中看到的行为.您将注意到输入组件和内联action帮助程序的行为方式不同.希望这可以帮助.

Answer 1

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

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

模板：

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