Ember.js如何阻止checkbox点击事件冒泡到父table行以避免误触发跳转

问题原因 #

点击checkbox的点击事件会向上冒泡到父级<tr>元素，触发绑定在tr上的goToMerchantsManage跳转action，只需要阻断checkbox点击事件的冒泡即可解决问题。

解决方案 #

修改你代码中checkbox所在行的代码，添加事件冒泡阻断逻辑即可：

适用Ember 3.10及以上版本（推荐） #

使用{{on}}修饰符搭配stop-propagation工具：

<td><input type="checkbox" {{on "click" (stop-propagation)}}> </td>

如果你的checkbox本身有绑定自定义点击逻辑，直接加在后面即可，不会影响原有逻辑：

<td><input type="checkbox" {{on "click" this.toggleSelect}} {{on "click" (stop-propagation)}}> </td>

适用Ember 3.10以下旧版本 #

使用旧版action语法关闭冒泡，不需要写实际的action逻辑，仅设置bubbles=false即可生效：

<td><input type="checkbox" {{action "" bubbles=false}}> </td>

你也可以选择在checkbox绑定的自定义点击方法内手动调用event.stopPropagation()，和上述方案效果完全一致。

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