使用 Ember 中的点击事件禁用 div 中复选框的点击触发

Question

我用 #each 循环创建了 divs。每个 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" 属性，但要么我没有把它放在正确的位置，要么它不是为这种情况制作的。

Answer 1

您能否不仅为复选框创建一个动作，而且 return false？

实际上，bubbles=false 可能仅在您在元素上定义了动作时才有效，因为毕竟，bubbles=false 应该放在动作助手中。

Answer 2

好的，这就是我的做法。

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

如果为真，则执行代码。在同一操作块中，在 if 块之外，我将属性设置为 true，因此当 div 单独被单击时，代码将被执行。如果它是假的（当你点击复选框时设置），代码将不会被执行。

使用 Ember 中的点击事件禁用 div 中复选框的点击触发

Disabling click triggering on a checkbox inside a div with a click event in Ember

handlebars.js

ember.js