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

Question

I have divs created with a #each loop. Each div have a click action and contains a checkbox. I want to prevent the checkbox from triggering the click event of its parent div. I am using Ember.js handlebars.

<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>

What is the most efficient way to do so? I did look onto the bubbles="false" attribute, but either I don't put it at the right place or it isn't made for this case.

Answer 1

Ok guys here is how I did it.

I added a selectedConv property in my itemController. I set it to false everytime checkbox is clicked (doesn't matter its status). I then verify this property with a 'if property' in the triggered action click.

If true, code is executed. In the same action block, outside the if block, I then set the property to true, so when the div alone is clicked, the code will be executed. If its false (set when you click the checkbox), code wont be executed.