JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://knockout-contrib.github.io/KoGrid/lib/jquery-1.8.2.min.js"></script>
<script src="https://knockout-contrib.github.io/KoGrid/lib/knockout-2.2.0.js"></script>
<div class="parent" data-bind="click: parentAction">
    <input type="checkbox" id="test" data-bind="checked: checkedFlag" />
    <label for="test" data-bind="stopBubble:parentAction">TestLabel</label>
</div>

CSS

.parent {
    width: 300px;
    height: 300px;
    background: blue;
    color: white;
}

JavaScript

ko.bindingHandlers.stopBubble = {
  init: function(element) {
    ko.utils.registerEventHandler(element, "click", function(event) {
         event.cancelBubble = true;
         if (event.stopPropagation) {
            event.stopPropagation(); 
         }
    });
  }
};

function testVM() {
    var self = this;

    self.checkedFlag = ko.observable(false);

    self.parentAction = function (data, event) {
        alert('triggered');
        return true;
    };
}

ko.applyBindings(new testVM());