在 Ember 中使用单击事件禁用 div 内的复选框上的单击触发答案

【问题标题】：Disabling click triggering on a checkbox inside a div with a click event in Ember在 Ember 中使用单击事件禁用 div 内的复选框上的单击触发
【发布时间】：2015-08-11 11:48:12
【问题描述】：

我用#each 循环创建了 div。每个 div 都有一个点击动作并包含一个复选框。我想防止复选框触发其父 div 的点击事件。我正在使用 Ember.js 车把。

<script type="text/x-handlebars" data-template-name="conversations">   
    {{#each conv in model itemController='singleconv'}}
            <div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
                    <div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
                    <div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
                    <div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>          
                <div class="conversation-history">          
                    <div class="conversation-time-history">{{{conv.timeAgoElement}}}</div>
                    <div class="conversation-details">
                        <span class="unread-numbers"></span>
                        {{input type='checkbox' checked=conv.isChecked bubbles="false"}}
                             <span class="conversation-name">{{conv.customer.name}}</span>
                             <span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
                            <p class="conversation-text">{{conv.lastMessage}}</p>
                    </div>
                </div>                       
            </div>
    {{/each}}     
</script>

最有效的方法是什么？我确实查看了 bubbles="false" 属性，但要么我没有把它放在正确的地方，要么它不是为这种情况而设计的。

【问题讨论】：

请将两个组件的组件 js 文件发布给您

标签： ember.js handlebars.js

【解决方案1】：

你能不能只为复选框创建一个动作，但返回 false？

实际上具有 bubbles=false 可能仅在您在元素上定义了一个动作时才有效，因为毕竟，bubbles=false 应该进入一个动作助手内部。

【讨论】：

我尝试对返回 false 的复选框进行操作，但仍会触发对 div 的点击。
肯定会调用复选框操作吗？
没有复选框动作，它是一个参数上的观察者查看检查状态

【解决方案2】：

好吧，伙计们，我就是这样做的。

我在我的 itemController 中添加了一个 selectedConv 属性。每次单击复选框时，我都将其设置为 false（与其状态无关）。然后，我在触发的操作单击中使用“if 属性”验证此属性。

如果为真，则执行代码。在同一个动作块中，在if块之外，然后我将属性设置为true，这样当单独点击div时，代码就会被执行。如果它为 false（单击复选框时设置），则不会执行代码。

【讨论】：