JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<ul data-bind="foreach: items">
    <li>
        <a href="#" data-bind="click: $root.clickedAnchor">
            <input type="checkbox" data-bind="preventBubble: ['click'], checked: active" />
            <span data-bind="text: name"></span>
        </a>
    </li>
</ul>
<ol data-bind="foreach: log">
    <li data-bind="text: $data"></li>
<ol>

JavaScript

ko.bindingHandlers.preventBubble = {
        init: function (element, valueAccessor) {
            var eventName = ko.utils.unwrapObservable(valueAccessor());
            var arr = eventName;
            if (!eventName.pop) {
                arr = [arr];
            }
            for (var p in arr) {
                ko.utils.registerEventHandler(element, arr[p], function (event) {
                    event.cancelBubble = true;
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    }
                });
            }
        }
    };

/**
 * Defines the main ViewModel
 * @returns {ViewModel}
 */
var ViewModel = function() {
    var self = this;
    
    self.items = ko.observableArray([
        {name: "Test 1", active: true},
        {name: "Test 2", active: false}
    ]);
    
    self.log = ko.observableArray([]);    
    
    self.clickedAnchor = function(){
        self.log.push(new Date().toDateString() + ': outer click worked...');
    };
};




$(document).ready(function() {
    ko.applyBindings(new ViewModel());
});