Question

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

<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 =假。在我的情况下，我不一定了解Ember的默认输入组件如何冒泡行动

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

Answer 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

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

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

2 个答案: