如何解决防止复选框将事件冒泡到父表行
下面是我用于数据表的 ember js 代码,当用户在表行上选择时,它会导航到不同的页面“goToMerchantsManage”,当用户单击复选框时不会发生这种情况。如何仅跳过复选框的导航。
> {{#each this.model.data as |entity|}}
> <tr {{action "goToMerchantsManage" entity}}>
> **<td><input type="checkbox" > </td>**
> {{#if (get (find-by 'propertyName' 'id' this.columns) 'active')}}
> <td>{{entity.id}} </td>
> {{/if}}
> {{#if (get (find-by 'propertyName' 'merchant.mid' this.columns) 'active')}}
> <td>
> <div class="text-nowrap d-flex flex-wrap">
> {{#each entity.merchant.mids as |mpa_mid|}}
> {{generic/mpa-mid-label mpa_mid=mpa_mid}}
> {{/each}}
> </div>
> </td>
> {{/if}}
> {{#if (get (find-by 'propertyName' 'contactInfo.companyName' this.columns) 'active')}}
> <td> {{text-highlight entity.contactInfo.companyName query=this.searchQuery}} </td>
> {{/if}}
解决方法
首先你应该使用 built-in ember checkbox
<Input
@id="admin-checkbox"
@type="checkbox"
@checked={{this.isAdmin}}
/>
然后为了解决您的问题,您只需要停止事件传播:
<Input
@id="admin-checkbox"
@type="checkbox"
@checked={{this.isAdmin}}
{{on "click" (stop-propagation)}}
/>
(请注意,您可以根据需要将操作传递给 stop-propagation
。不要忘记 install ember-event-helper
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。