当我单击子组件时，如何防止调用父组件上的操作？答案

【问题标题】：How can I prevent an action on a parent component from being called when I click on a child component?当我单击子组件时，如何防止调用父组件上的操作？
【发布时间】：2016-02-24 05:32:37
【问题描述】：

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

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

我遇到的问题是单击复选框不会更改其状态。但是，它确实会触发 expandItem 操作。我希望行为是单击复选框更改isChecked，但单击div 中的其他任何位置会触发expandItem。我怎样才能做到这一点？

编辑：问题Stop click propagation from Ember action 非常接近，但我看到的不同之处在于另一个问题中的子元素正在使用 {{action}} 帮助器，它可以很容易地停止使用 bubbles=false 传播。就我而言，我不一定了解 Ember 的默认输入组件如何使动作冒泡

第二次编辑：我完全重现了我在this JSBin 中看到的行为。您会注意到输入组件和内联 action 助手的行为方式不同。希望这会有所帮助。

【问题讨论】：

Stop click propagation from Ember action?的可能重复
@DeepakJose - 非常接近，我看到的不同之处在于另一个问题中的子元素使用了{{action}} 帮助器，它可以很容易地用bubbles=false 停止传播。就我而言，我不一定了解 Ember 的默认输入组件如何使动作冒泡。
试试{{input type="checkbox" checked=isChecked bubbles=false}}
@locks，刚试过...没有变化

标签： ember.js

【解决方案1】：

从 Ember 1.13.3 开始，您可以执行以下操作（该示例不使用输入助手，如果可能，我不建议使用它）：

模板：

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

您不能只使用bubbles=false 阻止动作传播，因为在这种情况下event.preventDefault 也称为禁用默认复选框行为。

这里是Ember Twiddle

【讨论】：

【解决方案2】：

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

但是有一个解决方法。创建一个浮动在复选框上方的不可见 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'));
  }
}

【讨论】：