Question

我有一个用#each循环创建的div。每个div都有一个单击操作，并包含一个复选框。我想阻止复选框触发其父div的click事件。我正在使用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>

最有效的方法是什么？我确实看过气泡=＆＃34;假＆＃34;属性，但要么我没有把它放在正确的地方，要么就是不适合这种情况。

Answer 1

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

实际上，bubbles = false可能仅在你在元素上定义了一个动作时起作用，因为毕竟，bubbles = false应该放在一个动作助手里面。

Answer 2

好的家伙就是我这样做的。

我在itemController中添加了selectedConv属性。我每次点击复选框都将其设置为false（与其状态无关）。然后，我使用＆＃39; if属性＆＃39;来验证此属性。在触发的动作中单击。

如果为true，则执行代码。在if块之外的同一个动作块中，我将属性设置为true，因此当单击div时，代码将被执行。如果为false（单击复选框时设置），则不执行代码。

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

2 个答案: