ClickBubble: false not working

Question

I followed this example from the KO binding documentation article click 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 button, the event is fired from tr. What am I missing?

Answer 1

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

Apparently, clickBubblewithout clickwill not work. If you need an event for the whole element, except for a specific child, the installation data-bind: "clickBubble: false"on the child will not work, you also need to specify a binding for click, even if it is just an empty function ...