EmberJS：如何让{{input}}内的动作优先于父元素动作执行？

问题场景 #

开发中遇到如下代码结构：

<div ... {{action "divAction"}}>
   ...
   {{input type="checkbox" change=(action "checkboxAction")}} 

   ...
</div>

实际触发时，父容器的divAction会先于复选框的checkboxAction执行，需求是让checkboxAction优先触发。

尝试过的无效方案 #

曾尝试通过绑定checked属性并监听变化的方式解决：
模板代码：

{{input type="checkbox" checked=checked}}

在对应类中添加监听逻辑：

checked: true,

checkedChanged: function() {
   // 业务逻辑
   return false;
}.observes('checked'),

但问题依旧存在，勾选复选框时控制台会出现异常，移除div上的动作后异常消失。

最终有效解决方案 #

通过在复选框外层包裹一个元素，利用event.stopPropagation()阻止事件冒泡，避免父容器的动作提前触发：

<span onclick="event.stopPropagation();">
  {{input type="checkbox"  checked=checked }}
  {{input type="checkbox" checked=checked change=(action "checkedChangedAction") }}
</span>

内容的提问来源于stack exchange，提问作者George