clickBubble: false not working

Question

I've followed this example from the KO documentation article on the click binding here:

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

And my code looks like this:

<tr role="row" data-bind="click: 'True' === 'True' ? ($root.BrowsingCatalog() ? $root.viewProduct : $root.showProduct) : $root.showProduct">
    <td class="col-sm-1" data-bind="visible: 'True' == 'True' ? !$root.BrowsingCatalog() : true">
        <div class="btn-group">
            <button type="button" data-bind="clickBubble: false" class="btn btn-round dropdown-toggle " aria-expanded="false">
                 <span class="fa fa-caret-down"></span> 
            </button>
        </div>
    </td>
</tr>

And when I click the button, the event from the tr gets called. What am I missing?

Answer 1

I solved it by setting data-bind="click: function() { }, clickBubble: false" on my button.

Apparently, clickBubble without click won't work. If you want an event on an entire element except for a certain child element, setting data-bind: "clickBubble: false" on the child will not work, you also need to specifiy a binding for click, even if it's just an empty function...